AngularJS Application
是時候建立一個真正的 AngularJS 應用程式了。
製作一個購物清單
讓我們使用一些 AngularJS 功能來製作一個購物清單，您可以在其中新增或刪除專案。
我的購物清單
- {{x}}×
{{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="https://w3schools.tw/w3css/4/w3.css">
自己動手試一試 »
