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 相关文章推荐
javascript 对象定义方法 简单易学
Mar 22 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
Jun 18 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
Nov 30 Javascript
jQuery侧边栏随窗口滚动实现方法
Mar 04 Javascript
jquery怎样实现ajax联动框(二)
Mar 08 Javascript
javascript中的onkeyup和onkeydown区别介绍
Apr 28 Javascript
JS中静态页面实现微信分享功能
Feb 06 Javascript
详解基于vue-router的动态权限控制实现方案
Sep 28 Javascript
浅谈使用React.setState需要注意的三点
Dec 18 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
layui插件表单验证提交触发提交的例子
Sep 09 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
Jul 18 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,ajax实现分页
2008/03/27 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
IE6 hack for js 集锦
2014/09/23 Javascript
js+css简单实现网页换肤效果
2015/12/29 Javascript
javascript DIV实现跟随鼠标移动
2020/03/19 Javascript
jquery之别踩白块游戏的简单实现
2016/07/25 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
使用Python写CUDA程序的方法
2017/03/27 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
Python使用numpy模块创建数组操作示例
2018/06/20 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
python 通过 socket 发送文件的实例代码
2018/08/14 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
python enumerate内置函数用法总结
2020/01/07 Python
pytorch方法测试——激活函数(ReLU)详解
2020/01/15 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
python实现杨辉三角的几种方法代码实例
2021/03/02 Python
节约电力资源的建议书
2014/03/12 职场文书
2014最新离职证明范本
2014/09/12 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
武侯祠导游词
2015/02/04 职场文书
月考总结与反思
2015/10/22 职场文书
如何写好开幕词?
2019/06/24 职场文书
python基于opencv批量生成验证码的示例
2021/04/28 Python
Python连续赋值需要注意的一些问题
2021/06/03 Python
浅谈mysql增加索引不生效的几种情况
2021/06/23 MySQL
Python+DeOldify实现老照片上色功能
2022/06/21 Python