AngularJS 应用程序

是时候创建一个真正的 AngularJS 应用程序了。

制定购物清单

让我们使用一些 AngularJS 功能来制作购物清单，您可以在其中添加或删除商品：

我的购物清单

{{X}}×

应用说明

步骤 1. 开始：

首先创建一个名为myShoppingList，并添加一个名为myCtrl到它。

控制器添加一个名为的数组products到目前的$scope。

在 HTML 中，我们使用ng-repeat指令使用数组中的项目显示列表。

示例

到目前为止，我们已经根据数组的项目创建了一个 HTML 列表：

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>

<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>

<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>

<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 样式表设计您的应用程序：

亲自试一试 »