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 相关文章推荐
在你的网页中嵌入外部网页的方法
Apr 02 Javascript
js 实现无缝滚动 兼容IE和FF
Jul 15 Javascript
Jquery 快速构建可拖曳的购物车DragDrop
Nov 30 Javascript
jquery实现非叠加式的搜索框提示效果
Jan 07 Javascript
JS控制输入框内字符串长度
May 21 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 Javascript
Javascript 字符串模板的简单实现
Feb 13 Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 Javascript
js实现上传图片预览方法
Oct 25 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 Javascript
js判断非127开头的IP地址的实例代码
Jan 05 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
简单的页面缓冲技术
2006/10/09 PHP
php设计模式 Singleton(单例模式)
2011/06/26 PHP
php实现的RSS生成类实例
2015/04/23 PHP
在PHP程序中使用Rust扩展的方法
2015/07/03 PHP
laravel5.4生成验证码的实例讲解
2017/08/05 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
2013/11/06 Javascript
在JavaScript中如何解决用execCommand(
2015/10/19 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
Bootstrap Paginator分页插件使用方法详解
2016/05/30 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
JS获取地址栏参数的两种方法(简单实用)
2016/06/14 Javascript
从0开始学Vue
2016/10/27 Javascript
webpack 1.x升级过程中的踩坑总结大全
2017/08/09 Javascript
layui的表单提交以及验证和修改弹框的实例
2019/09/09 Javascript
JavaScript oncopy事件用法实例解析
2020/05/13 Javascript
[26:40]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第一局
2016/02/25 DOTA
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
Python实现小数转化为百分数的格式化输出方法示例
2017/09/20 Python
解决Python内层for循环如何break出外层的循环的问题
2019/06/24 Python
python爬虫 Pyppeteer使用方法解析
2019/09/28 Python
Python编译成.so文件进行加密后调用的实现
2019/12/23 Python
python中id函数运行方式
2020/07/03 Python
python程序如何进行保存
2020/07/03 Python
Python map及filter函数使用方法解析
2020/08/06 Python
python开发一款翻译工具
2020/10/10 Python
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
岗位明星事迹材料
2014/05/18 职场文书
运动会搞笑广播稿
2014/10/14 职场文书
学习新党章心得体会2016
2016/01/15 职场文书
公司年会主持词范文!
2019/05/07 职场文书
pandas进行数据输入和输出的方法详解
2022/03/23 Python