Настало время, чтобы создать настоящий 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)">×</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)">×</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">
Попробуй сам "