AngularJS实现一次监听多个值发生的变化


Posted in Javascript onAugust 31, 2016

一、$watch简单使用

$watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你。

$watch(watchExpression, listener, objectEquality);

每个参数的说明如下:

watchExpression:监听的对象,它可以是一个angular表达式如'name',或函数如function(){return $scope.name}

listener:watchExpression变化时会被调用的函数或者表达式,它接收3个参数:newValue(新值), oldValue(旧值), scope(作用域的引用)

objectEquality:是否深度监听,如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它

举个栗子:

$scope.name = 'hello';

var watch = $scope.$watch('name',function(newValue,oldValue, scope){

    console.log(newValue);

    console.log(oldValue);

});

$timeout(function(){

    $scope.name = "world";

},1000);

二、监听多个值的变化

大家通常遇到的情况为通过$watch()一次监听一个值的变化,当然这种时候满足绝大部分情况。但是通过阅读官网对于$watch()的解释,$watch()还有第三个参数,第三个参数是一个布尔类型,表示是否深度监听,深度监听的例子就是是否进行比较对象的属性。

这样我们就可以实现一次监听多个值的变化。

示例代码

var app=angular.module("watchApp",[])
      .controller("watchController",["$scope",function($scope){
         $scope.object={};
         $scope.object.one=$scope.one;
         $scope.object.one=$scope.one;
         $scope.$watch("object",function(){
            .....
          },true);
      }])

总结

以上就是关于AngularJS如何一次监听多个值发生变化的全部内容,大家都学会了吗?希望这篇文章的内容对大家的学习和工作能有所帮助,如果有疑问可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Javascript中找到子元素在父元素内相对位置的代码
Jul 21 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 Javascript
js实现在字符串中提取数字
Nov 05 Javascript
jquery隐藏标签和显示标签的实例
Nov 11 Javascript
javascript中的undefined和not defined区别示例介绍
Feb 26 Javascript
谈谈JavaScript中function多重理解
Aug 28 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
Dec 08 Javascript
JavaScript错误处理和堆栈追踪详解
Apr 18 Javascript
jQuery实现简单的手风琴效果
Apr 17 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
Sep 04 Javascript
深入理解vue-class-component源码阅读
Feb 18 Javascript
利用Angularjs和bootstrap实现购物车功能
Aug 31 #Javascript
JavaScript String(字符串)对象的简单实例(推荐)
Aug 31 #Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 #Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
Aug 31 #Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
Aug 31 #Javascript
基于JavaScript实现点击页面任何位置返回
Aug 31 #Javascript
jquery datatable服务端分页
Aug 31 #Javascript
You might like
功能齐全的PHP发送邮件类代码附详细说明
2008/07/10 PHP
通俗易懂的php防注入代码
2010/04/07 PHP
PHP yii实现model添加默认值的方法(两种方法)
2016/11/10 PHP
微信自定义分享php代码分析
2016/11/24 PHP
本地对象Array的原型扩展实现代码
2010/12/04 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
jQuery给动态添加的元素绑定事件的方法
2015/03/09 Javascript
jQuery图片特效插件Revealing实现拉伸放大
2015/04/22 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
javascript正则表达式总结
2016/02/29 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
打造自己的jQuery插件入门教程
2016/09/23 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
Webpack实现按需打包Lodash的几种方法详解
2017/05/08 Javascript
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
JS实现简单的点赞与踩功能示例
2018/12/05 Javascript
javascript面向对象三大特征之多态实例详解
2019/07/24 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
微信小程序中weui用法解析
2019/10/21 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
Python之指数与E记法的区别详解
2019/11/21 Python
Opencv常见图像格式Data Type及代码实例
2020/11/02 Python
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
JSF面试题:Jsf中导航的标签是什么
2013/04/20 面试题
几个Shell Script面试题
2012/08/31 面试题
小学优秀班干部事迹材料
2014/05/25 职场文书
植树节标语
2014/06/27 职场文书
十岁生日答谢词
2015/01/05 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书