上一节:

  AngularJS 应用

  • 制定购物清单

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

    我的购物清单

    • {{x}}X
    Add

    {{errortext}}

  • 示例说明

    步骤1.入门：

    首先创建一个名为 myShoppingList 的应用程序，然后向其中添加一个名为 myCtrl 的控制器。
    控制器将一个名为 product 的数组添加到当前的 $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)">X</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)">X</span> </li>
    </ul>
     <input ng-model="addMe">
     <button ng-click="addItem()"> Add </button>
     <p>{{errortext}}</p>
</div>
    尝试一下

    步骤5.设计：

    该应用程序可以运行，但是可以使用更好的设计。 我们使用 bootstrap.css 样式表来样式化我们的应用程序。
    添加 bootstrap.css 样式表，并在整个应用程序中包括适当的类，其结果将与此页面顶部的购物清单相同。
    使用 bootstrap.css 样式表样式化应用程序： 
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    尝试一下
上一节: