下面来看一个$watch的比较复杂的例子:

还是回到http://www.cnblogs.com/liulangmao/p/3700919.html一开始讲的购物车例子,

给它添加一个计算总价和折扣的功能,如果总价超过500,则优惠10%:

代码如下:

  1. <!DOCTYPE html>
  2. <html ng-app>
  3. <head>
  4.   <title>11.1$watch监控数据变化</title>
  5.   <meta charset="utf-8">
  6.   <script src="../angular.js"></script>
  7.   <script src="script.js"></script>
  8. </head>
  9. <body>
  10. <div ng-controller="CartController">
  11.   <h1>your shopping cart</h1>
  12.   <table>
  13.     <tr ng-repeat="item in items">
  14.       <td>{{item.title}}</td>
  15.       <td><input ng-model="item.quantity"/></td>
  16.       <td>{{item.price|currency}}</td>
  17.       <td class="red">{{item.price*item.quantity|currency}}</td>
  18.       <td><button ng-click="remove($index)">remove</button></td>
  19.     </tr>
  20.   </table>
  21.   <hr>
  22.   <table>
  23.     <tr>
  24.       <td>总价: <span class="del">{{bill.all|currency}}</span></td>
  25.     </tr>
  26.     <tr>
  27.       <td>折扣: <span class="red">{{bill.discount|currency}}</span></td>
  28.     </tr>
  29.     <tr>
  30.       <td>现价: <span class="green">{{bill.now|currency}}</span></td>
  31.     </tr>
  32.   </table>
  33. </div>
  34. </body>
  35. </html>
  1. function CartController ($scope) {
  2.     $scope.items = [
  3.         {"title":"兔子","quantity":1,"price":"100"},
  4.         {"title":"喵","quantity":2,"price":"200"},
  5.         {"title":"狗只","quantity":1,"price":"400"},
  6.         {"title":"仓鼠","quantity":1,"price":"300"}
  7.     ];
  8.     $scope.remove = function(index){
  9.         $scope.items.splice(index,1)
  10.     };
  11.     $scope.bill = {
  12.         "all":0,
  13.         "discount":0,
  14.         "now":0
  15.     };
  16.     $scope.compute = function(){
  17.         var total = 0;
  18.         for(var i=0; i<$scope.items.length; i++){
  19.             total += $scope.items[i].quantity*$scope.items[i].price;
  20.         }
  21.         $scope.bill.all = total;
  22.         $scope.bill.discount = total >= 500 ? total*0.1 : 0 ;
  23.         $scope.bill.now = $scope.bill.all - $scope.bill.discount
  24.     };
  25.     $scope.$watch('items',$scope.compute,true);
  26. }

把需要计算的三个数据: 总价,折扣,现价,放在一个bill对象中,

监测商品列表items数组的变化,设置$watch的第三个参数为true,这样,商品的数据一旦发生变化,就会调用compute方法,重新计算bill对象中的三个数据

这个例子的js还可以写成这样:

  1. function CartController ($scope) {
  2.     $scope.items = [
  3.         {"title":"兔子","quantity":1,"price":"100"},
  4.         {"title":"喵","quantity":2,"price":"200"},
  5.         {"title":"狗只","quantity":1,"price":"400"},
  6.         {"title":"仓鼠","quantity":1,"price":"300"}
  7.     ];
  8.     $scope.remove = function(index){
  9.         $scope.items.splice(index,1)
  10.     };
  11.     $scope.bill = {
  12.         "all":0,
  13.         "discount":0,
  14.         "now":0
  15.     };
  16.     $scope.compute = function(){
  17.         var total = 0;
  18.         for(var i=0; i<$scope.items.length; i++){
  19.             total += $scope.items[i].quantity*$scope.items[i].price;
  20.         }
  21.         $scope.bill.all = total;
  22.         $scope.bill.discount = total >= 500 ? total*0.1 : 0 ;
  23.         $scope.bill.now = $scope.bill.all - $scope.bill.discount
  24.     };
  25.     $scope.$watch($scope.compute);
  26. }

差别只有最后一句红色的代码,把$watch的第一个参数从原来的items数组直接改为compute函数.也就是上一篇http://www.cnblogs.com/liulangmao/p/3722885.html讲到的$watch第一个参数的第4种情况.

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

遗留问题同上一篇,不清楚直接在$watch的第一个参数中传入函数时,究竟在监测什么东西的变化.

angular学习笔记(十四)-$watch(2)的更多相关文章

  1. 【转】angular学习笔记(十四)-$watch(1)

    本篇主要介绍$watch的基本概念: $watch是所有控制器的$scope中内置的方法: $scope.$watch(watchObj,watchCallback,ifDeep) watchObj: ...

  2. angular学习笔记(十四)-$watch(1)

    本篇主要介绍$watch的基本概念: $watch是所有控制器的$scope中内置的方法: $scope.$watch(watchObj,watchCallback,ifDeep) watchObj: ...

  3. angular学习笔记(十四)-$watch(3)

    同样的例子,还可以这样写: <!DOCTYPE html> <html ng-app> <head> <title>11.3$watch监控数据变化&l ...

  4. angular学习笔记(十四)-$watch(4)

    如果需要同时监测多个属性或者对象,并且执行的是同样的回调,可以有两种选择: 1. 监测这些属性连接起来之后的值: $scope.$watch('objOne.a+objTwo.b+...', watc ...

  5. angular学习笔记(十五)-module里的'服务'

    本篇介绍angular中的模块:module 在笔记(二)http://www.cnblogs.com/liulangmao/p/3711047.html里已经讲到过模块,这篇主要讲模块的 '服务' ...

  6. angular学习笔记(十九)-指令修改dom

    本篇主要介绍angular使用指令修改DOM: 使用angular指令可以自己扩展html语法,还可以做很多自定义的事情.在后面会专门讲解这一块的知识,这一篇只是起到了解入门的作用. 与控制器,过滤器 ...

  7. angular学习笔记(十六) -- 过滤器(2)

    本篇主要介绍angular自定义的过滤器: 直接看例子: <!DOCTYPE html> <html ng-app="MyFilter"> <head ...

  8. angular学习笔记(十六) -- 过滤器(1)

    本篇主要介绍过滤器的基本用法: 过滤器用来对数据进行格式的转换,数据格式的转化与逻辑无关,因此,我们使用过滤器来进行这些操作: {{... | filter2: 参数1,参数2... }} expre ...

  9. angular学习笔记(十)-src和href处理

    本篇主要介绍angular中图片的src和链接的href的处理: 用到了以下两个属性: ng-src: 绑定了数据的路径表达式 ng-href: 绑定了数据的路径表达式 例如: <!DOCTYP ...

随机推荐

  1. Flume-0.9.4数据插入HBase-0.96

    来自:http://blog.csdn.net/iam333/article/details/18770977 最近由于业务需要,需要将flume的数据插入HBase-0.96,利用flume的实时日 ...

  2. static 和 no static Member function学习

    以下是做实验的一段代码: #include <iostream> using namespace std; typedef void (*p)(); class Object { publ ...

  3. SIT与UAT的分别

    在企业级软件的测试过程中,经常会划分为三个阶段——单元测试,SIT和UAT,如果开发人员足够,通常还会在SIT之前引入代码审查机制(Code Review)来保证软件符合客户需求且流程正确.下面简单介 ...

  4. python之poplib模块下载并解析邮件

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #python之poplib模块下载并解析邮件 #https://github.com/michaelliao ...

  5. java 正则举例

    Greedy 数量词 X? X,一次或一次也没有 X* X,零次或多次 X+ X,一次或多次 X{n} X,恰好 n 次 X{n,} X,至少 n 次 X{n,m} X,至少 n 次,但是不超过 m ...

  6. 生产服务器环境最小化安装后 Centos 6.5优化配置备忘

    生产服务器环境最小化安装后 Centos 6.5优化配置备忘 作者:Memory 发布于:2014-8-13 15:00 Wednesday 服务器 本文 centos 6.5 优化 的项有18处: ...

  7. java、c/c++ 、python 等性能比较 杂谈(整理)

    链接:https://www.zhihu.com/question/40393531/answer/133242263著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 有人用pyt ...

  8. Web文件管理、私有云存储管理工具 DzzOffice

    DzzOffice-大桌子办公系统本身是一款图形化,简单易用的网盘管理软件.可以实现将企业的局域网服务器.企业私有云存储.企业租用的公有云存储(如阿里云OSS).企业员工的私有云存储(如百度网盘.Dr ...

  9. Google Volley框架之https请求

    先插一句.Google出的volley框架本身是支持https请求的,可是仅仅是针对有第三方机构认证过的. 假设自己随便在网上搞的一个证书,那volley是不支持请求的. 本文讲下怎样让volley支 ...

  10. Mustache模板引擎

    Mustache是一个Logic-Less模板引擎,即:零逻辑引擎,原因在于它只有标签,没有流程控制语句,这是它与其它模板引擎不同的地方. Mustache小巧玲珑,几乎用各种语言都实现了一遍. Mu ...