我的angularjs第三步
我的angularjs第三步
先新增一個html
third.html
1 <!DOCTYPE html> 2 <html ng-app> 3 <head> 4 <title>rwrwe</title> 5 <script src="../js/angular.min.js"></script> 6 <script src="../app/controller.js"></script> 7 </head> 8 <body ng-controller="CartController"> 9 <h1>Your Order</h1> 10 <div ng-repeat="item in items"> 11 <span>{{item.title}}</span> 12 <input ng-model="item.quantity" /> 13 <span>{{item.price|currency}}</span> 14 <span>{{item.price*item.quantity|currency}}</span> 15 <button ng-click="remove($index)">Remove</button> 16 </div> 17 </body> 18 </html>
一樣加入angulrjs
然後加入一個js
controller.js
1 function CartController($scope) { 2 $scope.items = [{ 3 title: "paint pots", 4 quantity: 8, 5 price: 3.95 6 }, { 7 title: "paint2 pots", 8 quantity: 17, 9 price: 12.95 10 }, { 11 title: "paint4 pots", 12 quantity: 5, 13 price: 6.95 14 }]; 15 $scope.remove = function (index) { 16 $scope.items.splice(index, 1); 17 }; 18 }
說明如下:
<html ng-app>
ng-app屬性是要告訴Angular它應該要管理頁面的哪一個部份。因為是放在html元素上，所以是告知Angular
管理整個頁面。但是如果你正在集成Angular和一個已存在的使用其他方式管理頁面的應用，則可放在需要應用
的div上。
<body ng-controller="CartController" >
在Angular中，用JavaScript類管理的頁面區域叫做控制器。在body標籤中的CartController將管理body
標籤之間的任何東西。
<div ng-repeat="item in items‘ >
ng-repeat 代表為items數組中每個元素複製一次這div中的DOM。在div每次複製，同時設罝一個叫item的屬
性代表當前的元素，所以我們能夠在模板中使用。
<span>{{item.title}}</span>
資料綁定是利用{{}}把變數的值插入到頁面某部份保持同步。{{item.title}}檢索迭代中的當前項，然後將當
前項的title屬性值插入到DOM中。
<input ng-model="item.quantity">
ng-model定義創建了輸入字串和item.quantity之間的資料綁定。
span中的{{}}建立了一個單向聯繫，指在這裡輸入值。但是應用程序也需要知道，當用戶改變數量時，也能夠
改變總價，這是我們要的結果。
因此通過使用ng-model，將會使我們的模型保持同步更改。ng-model聲明將item.quantity的值插入至輸入框
中，無論何時輸入一個新值，都將自動更新item.quantity。
<span>{{item.price|currency}}</span> <span>{{item.price*item.quantity|currency}}</span>
把單價和總價格式化成預設貨幣格式。Angular有一個過濾器的特性，currency。
<button ng-click="remove($index)">Remove</button>
Remove按鍵從購物車移除該項。我們已經設定，以便單擊該按鈕調用的remove（）函數。
我們還通過在$index，其中包含ng-repeat的迭代順序，所以我們知道要刪除的項目。
function CartController($scope){
CartController管理這睡物車的邏輯。通過這個我們告知Angular控制器需要一個叫$scope的對象。$scope
就是用來把資料綁定到使用者界面上的元素。
$scope.items = [ {title: ‘Paint pots‘, quantity: 8, price: 3.95}, {title: ‘Polka dots‘, quantity: 17, price: 12.95}, {title: ‘Pebbles‘, quantity: 5, price: 6.95} ];
這是一個資料，代表了用戶購物車中物品集合。
$scope.remove = function (index) { $scope.items.splice(index, 1); };
我們希望remove（）函數可用來綁定在使用者界面上，所以我們也把它增加到$scope中。
對於這個暫時內存中的購物車，在Remove（）函數只是可以直接從數組中刪除項目。
因為通過ng-repeat創建的這些<div>是資料綁定的，當某項消失時，列表自動收縮。
請記住，每當用戶點擊Remove按鈕中的一個，都將從使用者界面上呼叫remove（）函數。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
