AngularJS 應用程序

是時候創建一個真正的 AngularJS 應用程序了。

制作購物清單

讓我們使用 AngularJS 的一些功能來制作一個購物清單，您可以在其中添加或刪除商品：

我的購物清單
  • {{x}}×

{{errortext}}


應用程序說明

第 1 步：開始

首先創建一個名為 myShoppingList 的應用程序，并向其中添加一個名為 myCtrl 的控制器。

控制器將名為 products 的數組添加到當前的 $scope 中。

在 HTML 中，我們使用 ng-repeat 指令來顯示使用數組中的項目的列表。

實例

到目前為止，我們已經根據數組的項目創建了一個 HTML 列表：

<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>
  </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 = ["牛奶", "面包", "奶酪"];
  $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()">添加</button>
</div>

親自試一試

第 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>
    </li>
  </ul>
  <input ng-model="addMe">
  <button ng-click="addItem()">添加</button>
</div>

親自試一試

第 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>
    </li>
  </ul>
  <input ng-model="addMe">
  <button ng-click="addItem()">添加</button>
  <p>{{errortext}}</p>
</div>

親自試一試

第 5 步：設計

該應用程序可以運行，但可以使用更好的設計。我們使用 W3.CSS 樣式表來設計我們的應用程序。

添加 W3.CSS 樣式表，并在整個應用程序中包含適當的類，結果將與本頁頂部的購物清單相同。

實例

使用 W3.CSS 樣式表來設計您的應用程序：

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

親自試一試