angular学习笔记(十四)-$watch(2)
下面来看一个$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的第一个参数中传入函数时,究竟在监测什么东西的变化.
angular学习笔记(十四)-$watch(2)的更多相关文章
- 【转】angular学习笔记(十四)-$watch(1)
本篇主要介绍$watch的基本概念: $watch是所有控制器的$scope中内置的方法: $scope.$watch(watchObj,watchCallback,ifDeep) watchObj: ...
- angular学习笔记(十四)-$watch(1)
本篇主要介绍$watch的基本概念: $watch是所有控制器的$scope中内置的方法: $scope.$watch(watchObj,watchCallback,ifDeep) watchObj: ...
- angular学习笔记(十四)-$watch(3)
同样的例子,还可以这样写: <!DOCTYPE html> <html ng-app> <head> <title>11.3$watch监控数据变化&l ...
- angular学习笔记(十四)-$watch(4)
如果需要同时监测多个属性或者对象,并且执行的是同样的回调,可以有两种选择: 1. 监测这些属性连接起来之后的值: $scope.$watch('objOne.a+objTwo.b+...', watc ...
- angular学习笔记(十五)-module里的'服务'
本篇介绍angular中的模块:module 在笔记(二)http://www.cnblogs.com/liulangmao/p/3711047.html里已经讲到过模块,这篇主要讲模块的 '服务' ...
- angular学习笔记(十九)-指令修改dom
本篇主要介绍angular使用指令修改DOM: 使用angular指令可以自己扩展html语法,还可以做很多自定义的事情.在后面会专门讲解这一块的知识,这一篇只是起到了解入门的作用. 与控制器,过滤器 ...
- angular学习笔记(十六) -- 过滤器(2)
本篇主要介绍angular自定义的过滤器: 直接看例子: <!DOCTYPE html> <html ng-app="MyFilter"> <head ...
- angular学习笔记(十六) -- 过滤器(1)
本篇主要介绍过滤器的基本用法: 过滤器用来对数据进行格式的转换,数据格式的转化与逻辑无关,因此,我们使用过滤器来进行这些操作: {{... | filter2: 参数1,参数2... }} expre ...
- angular学习笔记(十)-src和href处理
本篇主要介绍angular中图片的src和链接的href的处理: 用到了以下两个属性: ng-src: 绑定了数据的路径表达式 ng-href: 绑定了数据的路径表达式 例如: <!DOCTYP ...
随机推荐
- Flume-0.9.4数据插入HBase-0.96
来自:http://blog.csdn.net/iam333/article/details/18770977 最近由于业务需要,需要将flume的数据插入HBase-0.96,利用flume的实时日 ...
- static 和 no static Member function学习
以下是做实验的一段代码: #include <iostream> using namespace std; typedef void (*p)(); class Object { publ ...
- SIT与UAT的分别
在企业级软件的测试过程中,经常会划分为三个阶段——单元测试,SIT和UAT,如果开发人员足够,通常还会在SIT之前引入代码审查机制(Code Review)来保证软件符合客户需求且流程正确.下面简单介 ...
- python之poplib模块下载并解析邮件
# -*- coding: utf-8 -*- #python 27 #xiaodeng #python之poplib模块下载并解析邮件 #https://github.com/michaelliao ...
- java 正则举例
Greedy 数量词 X? X,一次或一次也没有 X* X,零次或多次 X+ X,一次或多次 X{n} X,恰好 n 次 X{n,} X,至少 n 次 X{n,m} X,至少 n 次,但是不超过 m ...
- 生产服务器环境最小化安装后 Centos 6.5优化配置备忘
生产服务器环境最小化安装后 Centos 6.5优化配置备忘 作者:Memory 发布于:2014-8-13 15:00 Wednesday 服务器 本文 centos 6.5 优化 的项有18处: ...
- java、c/c++ 、python 等性能比较 杂谈(整理)
链接:https://www.zhihu.com/question/40393531/answer/133242263著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 有人用pyt ...
- Web文件管理、私有云存储管理工具 DzzOffice
DzzOffice-大桌子办公系统本身是一款图形化,简单易用的网盘管理软件.可以实现将企业的局域网服务器.企业私有云存储.企业租用的公有云存储(如阿里云OSS).企业员工的私有云存储(如百度网盘.Dr ...
- Google Volley框架之https请求
先插一句.Google出的volley框架本身是支持https请求的,可是仅仅是针对有第三方机构认证过的. 假设自己随便在网上搞的一个证书,那volley是不支持请求的. 本文讲下怎样让volley支 ...
- Mustache模板引擎
Mustache是一个Logic-Less模板引擎,即:零逻辑引擎,原因在于它只有标签,没有流程控制语句,这是它与其它模板引擎不同的地方. Mustache小巧玲珑,几乎用各种语言都实现了一遍. Mu ...