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 学习笔记(六)
Dec 31 Javascript
Jquery取得iframe下内容的方法
Nov 18 Javascript
AngularJS中的模块详解
Jan 29 Javascript
js生成随机数的方法实例
Oct 16 Javascript
第三篇Bootstrap网格基础
Jun 21 Javascript
js判断出两个字符串最大子串的函数实现方法
Nov 01 Javascript
Angular2 PrimeNG分页模块学习
Jan 14 Javascript
codeMirror插件使用讲解
Jan 16 Javascript
JS中IP地址与整数相互转换的实现代码
Apr 10 Javascript
浅谈Angular2 模块懒加载的方法
Oct 04 Javascript
JS实现的DOM插入节点操作示例
Apr 04 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 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
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
在PHP中实现Javascript的escape()函数代码
2010/08/08 PHP
Smarty变量调节器失效的解决办法
2014/08/20 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
PHP面向对象五大原则之接口隔离原则(ISP)详解
2018/04/04 PHP
jQuery DIV弹出效果实现代码
2009/07/03 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
2014/07/18 Javascript
JQUERY简单按钮轮换选中效果实现方法
2015/05/07 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
2019/10/26 Javascript
Vue中key的作用示例代码详解
2020/06/10 Javascript
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
Python处理字符串之isspace()方法的使用
2015/05/19 Python
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
python抖音表白程序源代码
2019/04/07 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
Django的models模型的具体使用
2019/07/15 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
css sprite简单实例
2016/05/23 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
美国医疗用品、医疗设备和家庭保健用品商店:Medical Supply Depot
2018/07/08 全球购物
教师求职信范文分享
2013/12/27 职场文书
教师旷工检讨书
2014/01/18 职场文书
C++程序员求职信
2014/05/07 职场文书
冲出亚马逊观后感
2015/06/03 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
2019年暑期法院实习报告
2019/12/18 职场文书
JavaScript继承的三种方法实例
2021/05/12 Javascript