AngularJS 应用程序
是时候创建一个真正的 AngularJS 应用程序了。
制作购物清单
让我们使用 AngularJS 的一些功能来制作购物清单，您可以在其中添加或删除商品:
My Shopping List
- {{x}}×
{{errortext}}
应用说明
步骤 1. 开始:
首先创建一个名为 myShoppingList 的应用程序，并向其中添加一个名为 myCtrl 的控制器。 p>
控制器将一个名为 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 使用当前 $index 调用 removeItem 函数的指令。
实例
现在我们可以从购物清单中删除商品了:
<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://www.w3ccoo.com/w3css/4/w3.css">
亲自试一试 »
