在scope的内置的所有函数中，用的最多的可能就是$watch函数了， 当你的数据模型中某一部分发生变化时，$watch函数可以向你发出通知。 你可以监控单个对象的属性，亦可以监控需要经过计算的结果（函数）， 实际上只要能够被当做属性访问到， 或者可以当做一个Java函数被计算出来， 就可以被$wacth函数监控。它的函数签名为：

$watch (watchFn, watchAction, deepWatch)

其中watchFn

这个参数是一个带有Angular表达式或者函数的字符串， 它会返回被监控函数的数据模型的当前值。

　　watchAction

这是一个函数表达式， 当watchFn发生变化时会被调用。

　　deepWatch

如果设置为true， 这个可选的布尔型参数将会命令Angular去检查被监控对象的每个属性是否发生了变化。若果你想要监控数组中的元素， 或者对象上的所有属性， 而不只是监控一个简单的值， 就可以设置为true。

写了一个小例子，大家可以看看。

 <!DOCTYPE>

 <html ng-app='myApp'>

 <head>

     <meta charset="UTF-8">

     <title>Your Shopping Cart</title>

     <script src="../../../vendor/angular/angular.js"></script>

     <script src="../../../vendor/angular/angular-route.js"></script>

 </head>

 <body ng-controller='CartController'>

 <h1>Your order</h1>

 <div ng-repeat="item in items">

     <span>{{item.title}}</span>

     <input ng-model='item.quantity'>

     <span>{{item.price | currency}}</span>

     <span>{{item.price * item.quantity | currency}}</span>

     <div>Total:{{totalCart()}}</div>

     <div>Discount: {{bill.discount}}</div>

     <div>Subtatal: {{subtotal()}}</div>

 </div>

 <script>

     var myAppMoudle = angular.module('myApp', []);

     myAppMoudle.controller('CartController', ['$scope', function ($scope) {

         $scope.bill={};

         $scope.discount = 2;

         $scope.items = [{title: 'paint', quantity: 8, price: 3.95},

             {title: 'pa', quantity: 7, price: 3.95},

             {title: 'paa', quantity: 17, price: 3.95},

             {title: 'paaa', quantity: 177, price: 3.95}];

         $scope.totalCart = function () {

             var total = 0;

             for(var i = 0, len = $scope.items.length; i < len; i++){

                 total = total + $scope.items[i].price * $scope.items[i].quantity;

             }

             return total;

         }

         $scope.subtotal = function () {

             return $scope.totalCart() - $scope.discount;

         };

         function calculateDiscount(newValue, oldValue, scope) {

             $scope.bill.discount = newValue > 100 ? 10 : 0;

         }

         $scope.$watch($scope.totalCart, calculateDiscount);

     }]);

 </script>

 </body>

 </html>

AngularJS系统学习之$watch（监控）的更多相关文章

  1. AngularJS系统学习之Scope（作用域）

    本文出自:https://www.w3ctech.com/topic/1611 看完了没怎么懂,  也许是和别人 原文作者: Nicolas Bhttps://www.w3ctech.com/topi ...

  2. AngularJS系统学习之Module（模块）

    本文源自:http://blog.csdn.net/woxueliuyun/article/details/50962645 学习之后略有所得, 来此分享.建议看原文. 模块是提供一些特殊服务的功能块 ...

  3. AngularJS系统学习之Directive（指令）

    本文转自https://www.w3ctech.com/topic/1612 原文作者: Nicolas Bevacqua 原文:AngularJS’ Internals In Depth, Part ...

  4. AngularJS系统学习之Factory，Service， Provider（工厂，服务，供应者）

    本文转自:http://blog.csdn.net/zcl_love_wx/article/details/51404390 我看过敲过代码之后, 有了很深的理解, 这三个东西其实都是用来返回对象的. ...

  5. MES系统学习

    MES系统是当今制造型企业信息化的热点,而统一建模语言UML是面向对象建模的标准语言,在软件工程发挥着重要作用.MES系统如何进行UML建模呢,今天和大家重点讨论一下MES系统的UML建模方法,请看本 ...

  6. 系统学习Docker 践行DevOps理念

    Docker代表的容器技术是近两年的大热技术,和人工智能.区块链等热点不同,容器技术的门槛并不高,每一个开发.测试.运维人员都能在日常工作中掌握和使用,是当今IT从业人员的必备技能之一.本课程会带大家 ...

  7. 【js类库AngularJs】学习angularJs的指令（包括常见表单验证，隐藏等功能）

    [js类库AngularJs]学习angularJs的指令(包括常见表单验证,隐藏等功能) AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀 ...

  8. 零基础如何系统学习Java Web

    零基础如何系统学习Java Web?   我来给你说一说 你要下决心,我要转行做开发,这样你才能学成. 你要会打字,我公司原来有一个程序员,打字都是两个手一指禅,身为程序员你一指禅怎么写出的代码,半个 ...

  9. Unity3D 装备系统学习Inventory Pro 2.1.2 基础篇

    前言 前一篇 Unity3D 装备系统学习Inventory Pro 2.1.2 总结 基本泛泛的对于Inventory Pro 这个插件进行了讲解,主要是想提炼下通用装备系统结构和类体系.前两天又读 ...

随机推荐

  1. 简化动态MERGE的SQL计算

    MSSQL.ORACLE等数据库支持MERGE语句更新表.但表结构未知时,因为缺乏集合类数据.用存储过程获得表结构再动态拼出SQL很麻烦,代码会有几十行之多:相同原因,用Java等高级语言实现也不简单 ...

  2. 机器学习(Machine Learning)&amp;深度学习(Deep Learning)资料

    机器学习(Machine Learning)&深度学习(Deep Learning)资料 機器學習.深度學習方面不錯的資料,轉載. 原作:https://github.com/ty4z2008 ...

  3. windown vs2012 编译ffplay

    自己写的播放器播放有些文件出现问题,但ffplay播放都很正常,为方便调试,将ffplay.c编译成可执行文件. 一. 环境搭建 环境搭建前面已经有文章介绍,没有特殊的地方,不再赘述. 二.修改con ...

  4. C#中??和？分别是什么意思？ 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中，对象相等和对象一致分别指的是什么？

    C#中??和?分别是什么意思? 在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; ...

  5. soapUI学习笔记---断言的小使用

    转自:http://www.cnblogs.com/duimianyoushan/p/4274791.html 以下示例在soapUI 4.5中进行.刚开始学soapUI的使用,记录下以免忘记 1.创 ...

  6. 照猫画虎学gnuplot之折线图

    本节重点:怎样利用已知数据来画折线图. 首先说明:gunplot文件的后缀名为*.plt.本节讲述怎样利用已知数据来画折线图,顾名思义必定涉及到两个文件:一个是须要的数据文件,即*.dat文件.还有一 ...

  7. Mataplotlib事例操作

    刚开始需要的文件是和前边的两个连载一起的

  8. RuntimeWarning: Parent module 'test_project.test_case' not found while handling absolute

    1.Pycharm2016.3.2,导入unittest框架后,运行脚本总是warming,但不影响脚本具体执行 2.通过网上查询,将"C:\Program Files\JetBrains\ ...

  9. A20 Android 编译

    cd lichee ./build.sh -p sun7i_android -b wing-sc3075gs cd ../android4.2 . build/envsetup.sh lunch wi ...

  10. 【BZOJ1110】[POI2007]砝码Odw 贪心

    [BZOJ1110][POI2007]砝码Odw Description 在byteotian公司搬家的时候,他们发现他们的大量的精密砝码的搬运是一件恼人的工作.公司有一些固定容量的容器可以装这些砝码 ...