Nadszedł czas, aby stworzyć prawdziwe angularjs aplikację.
Zrób listę zakupów
Pozwala korzystać z niektórych funkcji angularjs zrobić listę zakupów, gdyby można dodać lub usunąć elementy:
Lista zakupów
- {{x}} ×
{{}} Errortext
Zastosowanie Poradnik
Krok 1. Wprowadzenie:
Zacznij od złożenia wniosku o nazwie myShoppingList i dodać kontroler o nazwie myCtrl do niego.
Sterownik dodaje tablicę nazwie products do aktualnego $scope .
W HTML, używamy ng-repeat dyrektywy, aby wyświetlić listę z wykorzystaniem elementów w tablicy.
Przykład
Do tej pory zrobiliśmy listę HTML w oparciu o wyżej elementów tablicy:
<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>
Spróbuj sam " Krok 2. Dodaję:
W HTML, dodać pole tekstowe i powiązać go z aplikacji z ng-model dyrektywy.
W sterowniku, aby funkcję o nazwie addItem i użyć wartości addMe polu tekstowym, aby dodać element do products tablicy.
Dodaj przycisk, i nadać mu ng-click dyrektywę, która będzie działać na addItem funkcję po kliknięciu przycisku.
Przykład
Teraz możemy dodać elementy do naszej listy zakupów:
<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>
Spróbuj sam " Krok 3. Usuwanie Pozycje:
Chcemy także, aby móc usunąć elementy z listy zakupów.
W sterowniku, aby funkcję o nazwie removeItem , który odbywa indeks elementu, który chcesz usunąć, jako paramter
W HTML, zrobić <span> element dla każdego elementu i dać im ng-click dyrektywę, która wywołuje removeItem funkcji z aktualnego $index .
Przykład
Teraz możemy usunąć elementy z naszej listy zakupów:
<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>
Spróbuj sam " Krok 4. Obsługa błędów:
Aplikacja posiada kilka błędów, podobnie jak w przypadku próby dodania ten sam element dwukrotnie, awarie aplikacji. Ponadto, nie należy dopuścić, aby dodać pozycje puste.
Będziemy to naprawić poprzez sprawdzenie wartości przed dodaniem nowych elementów.
W HTML, dodamy pojemnik komunikaty o błędach i napisać komunikat o błędzie, gdy ktoś próbuje dodać istniejący element.
Przykład
Lista zakupów, z możliwością zapisu komunikatów o błędach:
<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>
Spróbuj sam " Krok 5. Projekt:
Aplikacja działa, ale przydałby się lepszy design. Używamy stylów W3.CSS projektować naszą aplikację.
Dodaj stylów W3.CSS i obejmują odpowiednie zajęcia całej aplikacji, a wynik będzie taki sam, jak na liście zakupów w górnej części tej strony.
Przykład
Styl swoją aplikację za pomocą arkusza stylów W3.CSS:
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
Spróbuj sam "