angularJS使用$watch监控数据模型的变化

使用$watch监控数据模型的变化

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

  1. $watch(watchFn, watchAction, deepWatch)

其中每个参数的详细含义如下。

watchFn

该参数是一个带有Angular 表达式或者函数的字符串,它会返回被监控的数据模型的当前值。这个表达式将会被执行很多次,所以你要保证它不会产生其他副作用。也就是说,要保证它可以被调用很多次而不会改变状态。基于同样的原因,监控表达式应该很容易被计算出来。如果你使用字符串传递了一个Angular 表达式,那么它将会针对调用它的那个作用域中的对象而执行。

watchAction

这是一个函数或者表达式,当watchFn 发生变化时会被调用。如果是函数的形式,它将会接收到watchFn 的新旧两个值,以及作用域对象的引用。其函数签名为function(newValue, oldValue, scope)。

deepWatch

如果设置为true,这个可选的布尔型参数将会命令Angular 去检查被监控对象的每个属性是否发生了变化。如果你想要监控数组中的元素,或者对象上的所有属性,而不只是监控一个简单的值,你就可以使用这个参数。由于Angular 需要遍历数组或者对象,如果集合比较大,那么运算负担就会比较重。

$watch 函数会返回一个函数,当你不再需要接收变更通知时,可以用这个返回的函数注销监控器。

如果我们需要监控一个属性,然后接着注销监控,我们可以使用以下代码:

  1. ...
  2. var dereg = $scope.$watch(‘someModel.someProperty‘, callbackOnChange());
  3. dereg();

我们再回到第1 章的购物车案例,把它的功能扩充完整。例如,当用户添加到购物车中的商品价值超过100 美元的时候,我们会给他10 美元的折扣。我们将会使用下面这种模板:

  1. <div ng-controller="CartController">
  2. <div ng-repeat="item in items">
  3. <span>{{item.title}}</span>
  4. <input ng-model="item.quantity">
  5. <span>{{item.price | currency}}</span>
  6. <span>{{item.price * item.quantity | currency}}</span>
  7. </div>
  8. <div>Total: {{totalCart() | currency}}</div>
  9. <div>Discount: {{bill.discount | currency}}</div>
  10. <div>Subtotal: {{subtotal() | currency}}</div>
  11. </div>

而CartController 看起来可能像下面这样:

  1. function CartController($scope) {
  2. $scope.bill = {};
  3. $scope.items = [
  4. {title: ‘Paint pots‘, quantity: 8, price: 3.95},
  5. {title: ‘Polka dots‘, quantity: 17, price: 12.95},
  6. {title: ‘Pebbles‘, quantity: 5, price: 6.95}
  7. ];
  8. $scope.totalCart = function() {
  9. var total = 0;
  10. for (var i = 0, len = $scope.items.length; i < len; i++) {
  11. totaltotal = total + $scope.items[i].price * $scope.items[i].quantity;
  12. }
  13. return total;
  14. }
  15. $scope.subtotal = function() {
  16. return $scope.totalCart() - $scope.discount;
  17. };
  18. function calculateDiscount(newValue, oldValue, scope) {
  19. $scope.bill.discount = newValue > 100 ? 10 : 0;
  20. }
  21. $scope.$watch($scope.totalCart, calculateDiscount);
  22. }

注意CartController 的底部,我们在totalCart() 的值上面设置了一个监控,用来计算此次购物的总价。只要这个值发生变化,监控器就会调用calculateDiscount(), 然后我们就可以把折扣设置为相应的值。如果总价超过100 美元,我们将会把折扣设置为10 美元。否则,折扣为0。

图2-1 展示了用户将会看到的效果。

时间: 2024-10-01 22:55:05

angularJS使用$watch监控数据模型的变化的相关文章

vuejs能否监控localStorage的变化?

https://segmentfault.com/q/1010000006806036 1.问题 用vue.js过程中了解到计算属性,它类似于定义了一个函数f,f的返回值依赖于某些变量a,b,c.当a,b,c中任意一个发生变化,就调用f得到新的返回值. 我现在用token做登录身份验证,使用到localStorage,在computed中编写"函数",根据localStorage的值,在导航栏显示不同的链接:已经登录的显示"用户名"和"退出",未

android 监控EditText的变化

在玩android的时候,有时候需要这样的功能,在editText里输入字符,要实时的监控输入的内容,比如 我要获取手机的IMEI号码.最后要输入*#06#就可以获取到了.那这是如何做到呢?或者说Phone是如何实现这个功能的呢? 这主要用到了TextWatcher接口. public class DialpadFragment extends Fragment implements View.OnClickListener, View.OnLongClickListener, View.OnK

Python监控文件内容变化

利用seek监控文件内容,并打印出变化内容: #/usr/bin/env python #-*- coding=utf-8 -*- pos = 0 while True:     con = open("a.txt")     if pos != 0:         con.seek(pos,0)     while True: line = con.readline() if line.strip():     print line.strip() pos = pos + len(

[转帖]监控Linux文件变化,防止系统被黑

监控Linux文件变化,防止系统被黑 https://os.51cto.com/art/201912/608702.htm改天尝试一下 inotify 运维服务器比较头疼的一个问题是系统被黑,沦为肉鸡或者矿机.除了加强安全基线配置,加强网络和端口加固,系统和应用bug修复,上IDS/IPS(入侵检测/防御系统)之外,另一个方面就是系统监控,一个完善准确的安全监控可以在主机层面及时发现入侵活动.予以告警以备及时处理. 作者:虫虫安全来源:今日头条|2019-12-31 14:00 收藏 分享 运维

angularjs中使用$scope.$watch监控对象模型的变化

如果对象模型发生变化时,可以使用$scope.$watch监控变化 <html ng-app="myApp"> <head> <title>angularjs-demo</title> <script type="text/javascript" src="lib/angularjs/angular.min.js" charset="utf-8"></scrip

Angularjs【监听数据的变化】和【如何修改数据】和【数据变化的传播】

一:监听数据的变化: 由于编译仅仅在启动引导时执行一次,这意味着我们的link函数只会被调用一次,那么, 如果数据变化,在界面上将不会有任何反馈,即界面和数据将变得不同步了. 这需要持续监听数据的变化. 好在AngularJS的scope对象可以使用$watch()方法,对建立在其上的变量的变化进行监听: watch(watchExpression,listener,[objectEquality]);watch方法要求传入三个参数: watchExpression - 要监听的表达式,比如:"

时时监控input的变化

移动端(html5)微信公众号下用keyup实时监控input值的变化无效 2014-10-17 14:51 16738人阅读 评论(1) 收藏 举报  分类: html5(30)  javascript(84)  版权声明:本文为博主原创文章,未经博主允许不得转载. 搜索框依据用户输入的值实时检索,一开始自然而然想到keyup,在拼音状态时,啥问题也没有, 问题1:切换到中文输入法,问题出来了,keyup事件不灵便了,后来在网上搜了下,找到了思路, 问题2:微信公众平台开发时,客户提需求"输入

AngularJS下拉列表select在option动态变化之后多出了一个错误项的问题

场景: Select初始化之后,选中select的某个选项 通过AngularJS更新select的选项 错误写法: HTML(使用ng-repeat) <div ng-app="TestApp"> <div ng-controller="TestAppCtrl"> <label>options变化之后会出错:</label> <select ng-model="selectedSite"&g

160411、实时监控mysql数据库变化

对于二次开发来说,很大一部分就找找文件和找数据库的变化情况 对于数据库变化.还没有发现比较好用的监控数据库变化监控软件. 今天,我就给大家介绍一个如何使用mysql自带的功能监控数据库变化 1.打开数据库配置文件my.ini (一般在数据库安装目录)(D:\MYSQL) 2.在数据库的最后一行添加 log=log.txt 代码 3.重启mysql数据库 4.去数据库数据目录 我的是(D:\MYSQL\data) 你会发现多了一个log.txt文件 我的是在C:\Documents and Set