ఏంజులర్ జి అప్లికేషన్

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["牛奶", "面包", "奶酪"];
});
</script>
<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in products">{{x}}</li>
  

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["牛奶", "面包", "奶酪"];
  $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>
  
  
  添加

స్వయంగా ప్రయత్నించండి

第 3 步：删除商品

我们还希望能够从购物清单中删除商品。

在控制器中，创建一个名为 removeItem 的函数，该函数将您想要删除的项目的索引作为参数。

在 HTML 中，为每个项目创建一个 <span> 元素，并为其提供一个 ng-click 指令，该指令使用当前 $index 调用 removeItem 函数。

ఇన్స్టాన్స్

现在我们可以从购物清单中删除商品：

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["牛奶", "面包", "奶酪"];
  $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>
    
  
  
  添加

స్వయంగా ప్రయత్నించండి

第 4 步：错误处理

该应用有一些错误，例如，如果您尝试两次添加相同的商品，该应用就会崩溃。另外，也不应该允许添加空商品。

我们将通过添加新商品前检查值来解决这个问题。

在 HTML 中，我们将添加一个用于错误消息的容器，并在有人尝试添加现有商品时编写错误消息。

ఇన్స్టాన్స్

购物清单，可以写入错误消息：

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["牛奶", "面包", "奶酪"];
  $scope.addItem = function () {
    $scope.errortext = \
    if (!$scope.addMe) {return;}
    if ($scope.products.indexOf($scope.addMe) == -1) {
      $scope.products.push($scope.addMe);
    } else {
      $scope.errortext = \
    }
  }
  $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>
    
  
  
  添加
  
{{errortext}}

స్వయంగా ప్రయత్నించండి

第 5 步：设计

该应用程序可以运行，但可以使用更好的设计。我们使用 W3.CSS 样式表来设计我们的应用程序。

W3.CSS స్టైల్ షీట్లను జోడించి, మరియు మీ అప్లికేషన్ లో సరైన క్లాస్లను అంతర్భాగం చేయండి, తరువాత పేజీ పైన షాపింగ్ లిస్ట్ అని మీరు పొందుతారు.

ఇన్స్టాన్స్

మీ అప్లికేషన్ ను డిజైన్ చేయడానికి W3.CSS స్టైల్ షీట్లను ఉపయోగించండి:

<link rel="stylesheet" href="https://www.codew3c.com/lib/style/w3.css">

స్వయంగా ప్రయత్నించండి