Последние учебники веб-разработки
 

AngularJS заявка


Настало время, чтобы создать настоящий AngularJS приложение.


Сделать список покупок

Позволяет использовать некоторые из функций AngularJS, чтобы составить список покупок, где вы можете добавлять или удалять элементы:

Мой Список покупок

  • {{х}} ×

{{ErrorText}}



Применение Разъяснения

Шаг 1. Начало работы:

Начните с создания приложение под названием myShoppingList , а также добавить контроллер с именем myCtrl к нему.

Контроллер добавляет массив с именем products для текущего $scope .

В HTML, мы используем ng-repeat директиву для отображения списка с помощью элементов в массиве.

пример

До сих пор мы сделали список HTML на основе элементов массива:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
    $scope.products = ["Milk", "Bread", "Cheese"];
});
</script>

<div ng-app="myShoppingList" ng-controller="myCtrl">
    <ul>
        <li ng-repeat="x in products">{{x}}</li>
    </ul>
</div>
Попробуй сам "

Шаг 2. Добавление элементов:

В HTML, добавьте текстовое поле, и привязать его к применению с ng-model директивы.

В контроллере, сделайте функцию с именем addItem , а также использовать значение addMe поля ввода , чтобы добавить элемент в список products массива.

Добавьте кнопку, и дайте ему ng-click директиву , которая будет запускать addItem функцию при нажатии на кнопку.

пример

Теперь мы можем добавлять элементы в наш список покупок:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
    $scope.products = ["Milk", "Bread", "Cheese"];
    $scope.addItem = function () {
        $scope.products.push($scope.addMe);
    }

});
</script>

<div ng-app="myShoppingList" ng-controller="myCtrl">
    <ul>
        <li ng-repeat="x in products">{{x}}</li>
    </ul>
    <input ng-model="addMe">
    <button ng-click="addItem()">Add</button>
</div>
Попробуй сам "

Шаг 3. Удаление элементов:

Мы также хотим, чтобы иметь возможность удалять элементы из списка покупок.

В контроллере, сделайте функцию с именем removeItem , который принимает индекс элемента , который вы хотите удалить, в качестве параметра

В HTML, сделайте <span> элемент для каждого элемента, и дать им ng-click директиву , которая вызывает removeItem функцию с текущей $index .

пример

Теперь мы можем удалить элементы из нашего списка покупок:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
    $scope.products = ["Milk", "Bread", "Cheese"];
    $scope.addItem = function () {
        $scope.products.push($scope.addMe);
    }
    $scope.removeItem = function (x) {
        $scope.products.splice(x, 1);
    }

});
</script>

<div ng-app="myShoppingList" ng-controller="myCtrl">
    <ul>
        <li ng-repeat="x in products">
            {{x}}
            <span ng-click="removeItem($index)">&times;</span>
       
</li>
    </ul>
    <input ng-model="addMe">
    <button ng-click="addItem()">Add</button>
</div>
Попробуй сам "

Шаг 4. Обработка ошибок:

Приложение имеет некоторые ошибки, например, если вы пытаетесь добавить один и тот же элемент в два раза, сбой приложения. Кроме того, не следует допускать, чтобы добавить пустые элементы.

Мы исправим это путем проверки значения перед добавлением новых элементов.

В HTML, мы добавим контейнер для сообщений об ошибках, а также написать сообщение об ошибке, когда кто-то пытается добавить существующий элемент.

пример

Список покупок, с возможностью записи сообщений об ошибках:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
    $scope.products = ["Milk", "Bread", "Cheese"];
    $scope.addItem = function () {
        $scope.errortext = "";
        if (!$scope.addMe) {return;}
        if ($scope.products.indexOf($scope.addMe) == -1) {
            $scope.products.push($scope.addMe);
        } else {
            $scope.errortext = "The item is already in your shopping list.";
        }
    }
    $scope.removeItem = function (x) {
        $scope.errortext = "";
        $scope.products.splice(x, 1);
    }
});
</script>

<div ng-app="myShoppingList" ng-controller="myCtrl">
    <ul>
        <li ng-repeat="x in products">
            {{x}}
            <span ng-click="removeItem($index)">&times;</span>
        </li>
    </ul>
    <input ng-model="addMe">
    <button ng-click="addItem()">Add</button>
    <p>{{errortext}}</p>
</div>
Попробуй сам "

Шаг 5. Конструкция:

Приложение работает, но может использовать лучший дизайн. Мы используем W3.CSS таблицу стилей для оформления нашего приложения.

Добавьте W3.CSS таблицу стилей, и включают в себя соответствующие классы по всему приложению, и результат будет таким же, как и список покупок в верхней части этой страницы.

пример

Стиль вашего приложения с помощью W3.CSS таблицы стилей:

<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
Попробуй сам "