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 相关文章推荐
破除网页鼠标右键被禁用的绝招大全
Dec 27 Javascript
学习ExtJS Panel常用方法
Oct 07 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 Javascript
Node.js和PHP根据ip获取地理位置的方法
Mar 14 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
初步使用bootstrap快速创建页面
Mar 03 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
微信小程序带动画弹窗组件使用方法详解
Nov 27 Javascript
浅谈一个webpack构建速度优化误区
Jun 24 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
Jul 18 Javascript
layui 表格操作列按钮动态显示的实现方法
Sep 06 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中文件读、写、删的操作(PHP中对文件和目录操作)
2012/03/06 PHP
浅谈php安全性需要注意的几点事项
2014/07/17 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
jquery中交替点击事件的实现代码
2014/02/14 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
浅析javascript的return语句
2015/12/15 Javascript
javascript实现可键盘控制的抽奖系统
2016/03/10 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
2016/07/22 Javascript
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
常见python正则用法的简单实例
2016/06/21 Python
python实现多线程抓取知乎用户
2016/12/12 Python
python中Pycharm 输出中文或打印中文乱码现象的解决办法
2017/06/16 Python
Python实现字典去除重复的方法示例
2017/07/31 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
如何利用Pyecharts可视化微信好友
2019/07/04 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
python IDLE添加行号显示教程
2020/04/25 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
2013/01/23 HTML / CSS
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
智乐游戏测试笔试题
2014/05/21 面试题
行政人事专员岗位职责
2014/03/05 职场文书
产品包装策划方案
2014/05/18 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
个人委托函范文
2015/01/29 职场文书
python实现简单区块链结构
2021/04/25 Python
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL
Java 通过手写分布式雪花SnowFlake生成ID方法详解
2022/04/07 Java/Android
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python