AngualrJS(十四)$watch 2
来源:互联网 发布:ip网络音柱 编辑:程序博客网 时间:2024/06/06 09:20
转载地址: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的第一个参数中传入函数时,究竟在监测什么东西的变化.
阅读全文
0 0
- AngualrJS(十四)$watch 2
- AngualrJS(十四)$watch 1
- AngualrJS(九)css类和样式2
- xenstore watch机制(2)
- angualrjs学习--控制器2嵌套控制器
- angualrJS 的坑们(1)
- AngualrJS(八)控制视图显示隐藏
- AngualrJS(十三)改变$scope的值
- AngualrJS的学习记录(二)
- Apple Watch Kit(2)- Actionable Notifications
- Apple watch 开发指南(2) 前言
- AngualrJs 最新 文件图片上传教程2:Client-Controller-modal
- AngualrJS(四)input元素的ng-model属性
- AngualrJS(九)css类和样式3
- AngualrJS的学习记录(三)一一AngularJS指令小结
- AngualrJs路由
- 表单angualrjs
- (二十四)优秀员工 - 2
- 1668: 高桥和低桥
- redis必杀高级:管道技术
- 线段树查询区间最大最小值
- 坚持,毅力(复杂)
- 我是一个线程
- AngualrJS(十四)$watch 2
- ISE14.7下载程序问题
- web.xml 配置-servlet
- hdu 6138 Fleet of the Eternal Throne 基于kmp算法的求解
- 广工oj 1231 && 51nod 1821 加强版 思维+并查集 OR 栈
- python随机产生100000个数计算满足条件的比例
- 迭代器
- python问题:IndentationError:expected an indented block错误解决
- java实现多线程延迟加载的单例模式