轉載地址：http://www.cnblogs.com/liulangmao/p/3723385.html
下面來看一個$watch的比較複雜的例子:
還是回到http://www.cnblogs.com/liulangmao/p/3700919.html一開始講的購物車例子,
給它添加一個計算總價和折扣的功能,如果總價超過500,則優惠10%:
代碼如下:
<!DOCTYPE html> <html ng-app> <head> <title>11.1$watch監控數據變化</title> <meta charset="utf-8"> <script src="../angular.js"></script> <script src="script.js"></script> </head> <body> <div ng-controller="CartController"> <h1>your shopping cart</h1> <table> <tr ng-repeat="item in items"> <td>{{item.title}}</td> <td><input ng-model="item.quantity"/></td> <td>{{item.price|currency}}</td> <td class="red">{{item.price*item.quantity|currency}}</td> <td><button ng-click="remove($index)">remove</button></td> </tr> </table> <hr> <table> <tr> <td>總價: <span class="del">{{bill.all|currency}}</span></td> </tr> <tr> <td>折扣: <span class="red">{{bill.discount|currency}}</span></td> </tr> <tr> <td>現價: <span class="green">{{bill.now|currency}}</span></td> </tr> </table> </div> </body> </html>
function CartController ($scope) { $scope.items = [ {"title":"兔子","quantity":1,"price":"100"}, {"title":"喵","quantity":2,"price":"200"}, {"title":"狗只","quantity":1,"price":"400"}, {"title":"倉鼠","quantity":1,"price":"300"} ]; $scope.remove = function(index){ $scope.items.splice(index,1) }; $scope.bill = { "all":0, "discount":0, "now":0 }; $scope.compute = function(){ var total = 0; for(var i=0; i<$scope.items.length; i++){ total += $scope.items[i].quantity*$scope.items[i].price; } $scope.bill.all = total; $scope.bill.discount = total >= 500 ? total*0.1 : 0 ; $scope.bill.now = $scope.bill.all - $scope.bill.discount }; $scope.$watch('items',$scope.compute,true); }
把需要計算的三個數據: 總價,折扣,現價,放在一個bill對象中,
監測商品列表items數組的變化,設置$watch的第三個參數爲true,這樣,商品的數據一旦發生變化,就會調用compute方法,重新計算bill對象中的三個數據
這個例子的js還可以寫成這樣:
function CartController ($scope) { $scope.items = [ {"title":"兔子","quantity":1,"price":"100"}, {"title":"喵","quantity":2,"price":"200"}, {"title":"狗只","quantity":1,"price":"400"}, {"title":"倉鼠","quantity":1,"price":"300"} ]; $scope.remove = function(index){ $scope.items.splice(index,1) }; $scope.bill = { "all":0, "discount":0, "now":0 }; $scope.compute = function(){ var total = 0; for(var i=0; i<$scope.items.length; i++){ total += $scope.items[i].quantity*$scope.items[i].price; } $scope.bill.all = total; $scope.bill.discount = total >= 500 ? total*0.1 : 0 ; $scope.bill.now = $scope.bill.all - $scope.bill.discount }; $scope.$watch($scope.compute); }
差別只有最後一句紅色的代碼,把$watch的第一個參數從原來的items數組直接改爲compute函數.也就是上一篇http://www.cnblogs.com/liulangmao/p/3722885.html講到的$watch第一個參數的第4種情況.
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
遺留問題同上一篇,不清楚直接在$watch的第一個參數中傳入函數時,究竟在監測什麼東西的變化.