Angular中使用$watch监听object属性值的变化(详解)


Posted in Javascript onApril 24, 2017

Angular中的$watch可以监听属性值的变化,然后并做出相应处理。

常见用法:

$scope.$watch("person", function(n, o){
  //todo something...
})

 

但是对于一个对象中的某个属性值变化时,$watch似乎不管用了。

示例代码:

<body>
  <div ng-controller="mainCtrl">
    <input id="myText" type="text" ng-model="person.name"/>
    <h2>{{person}}</h2>
    <h2>Status: {{status}}</h2>
  </div>
  <script>
  angular.module('myApp', [])
    .controller('mainCtrl', function ($scope) {
      $scope.person = {
        name:"allen",
        age:21
      }

      $scope.$watch("person", function(n, o){
        //取消第一次加载时的监听响应
        if(n == o){
          return;
        }
        $scope.status = "changed"
      })
  })
</script>
</body>

 

我们为输入框绑定了person对象的name属性,然而当我们改变输入框的值时候,{{person}}确实改变了,然而并没有出现我们想要的change字符。

效果:

Angular中使用$watch监听object属性值的变化(详解)

 我们需要为$watch方法额外添加一个true参数,使之达到我们想要的效果:

$scope.$watch("person", function(n, o){
  if(n == o){
    return;
  }
  $scope.status = "changed";
},true)

$watch方法完整的使用方式是这样的:

$watch(watchExpression, [listener], [objectEquality]);

第一个是监听的参数名称,剩下两个可选参数分别为处理函数和是相等比较的方式,对于后者文档如是说:Compare for object equality using angular.equals instead of comparing for reference equality. 即是否使用angular.equals方法进行比较。

如此效果变为:

Angular中使用$watch监听object属性值的变化(详解)

以上这篇Angular中使用$watch监听object属性值的变化(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
escape、encodeURI、encodeURIComponent等方法的区别比较
Dec 27 Javascript
jQuery学习笔记之Helloworld
Dec 22 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
Mar 25 Javascript
JS操作数据库的实例代码
Oct 17 Javascript
js判断日期时间有效性的方法
Oct 24 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
Jun 08 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 Javascript
vue 1.x 交互实现仿百度下拉列表示例
Oct 21 Javascript
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
深入了解javascript 数组的sort方法
Jun 01 Javascript
详解Vue demo实现商品列表的展示
May 07 Javascript
关于angular js_$watch监控属性和对象详解
Apr 24 #Javascript
Javascript操作dom对象之select全面解析
Apr 24 #Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 #Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 #jQuery
基于JavaScript实现类名的添加与移除
Apr 23 #Javascript
源码分析Vue.js的监听实现教程
Apr 23 #Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 #Javascript
You might like
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
Yii2针对指定url的生成及图片等的引入方法小结
2016/07/18 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
javascript 得到变量类型的函数
2010/05/19 Javascript
原生js 秒表实现代码
2012/07/24 Javascript
JS保存、读取、换行、转Json报错处理方法
2013/06/14 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
python中常用的各种数据库操作模块和连接实例
2014/05/29 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
python实现写数字文件名的递增保存文件方法
2018/10/25 Python
Python 获取ftp服务器文件时间的方法
2019/07/02 Python
python plt可视化——打印特殊符号和制作图例代码
2020/04/17 Python
python如何查看网页代码
2020/06/07 Python
django rest framework使用django-filter用法
2020/07/15 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
欧洲领先的火车票和大巴票预订平台:Trainline
2018/12/26 全球购物
护理毕业生自荐信范文
2013/12/22 职场文书
情况说明书格式范文
2014/05/06 职场文书
学校节能减排方案
2014/06/13 职场文书
大学生作弊检讨书
2014/09/11 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
2014年校长工作总结
2014/12/11 职场文书
运动会800米赞词
2015/07/22 职场文书
详解PHP Swoole与TCP三次握手
2021/05/27 PHP
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python