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 指令,该指令将调用当前 $indexremoveItem 函数。
    现在,我们可以从购物清单中删除商品:
    <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">