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 相关文章推荐
如何使用jQUery获取选中radio对应的值(一句代码)
Jun 03 Javascript
javascript进行四舍五入方法汇总
Dec 16 Javascript
JS模拟键盘打字效果的方法
Aug 05 Javascript
15个常用的jquery代码片段
Dec 19 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
Jun 28 Javascript
JavaScript中数组slice和splice的对比小结
Sep 22 Javascript
jquery  实现轮播图详解及实例代码
Oct 12 Javascript
详解动画插件wow.js的使用方法
Sep 13 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
layer弹出层自适应高度,垂直水平居中的实现
Sep 16 Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 Javascript
Vue中引入svg图标的两种方式
Jan 14 Vue.js
利用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使用curl发送json格式数据实例
2013/12/17 PHP
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
Angularjs实现分页和分页算法的示例代码
2016/12/23 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
2016/12/26 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
BackBone及其实例探究_动力节点Java学院整理
2017/07/14 Javascript
vue axios同步请求解决方案
2017/09/29 Javascript
vue中的provide/inject的学习使用
2018/05/09 Javascript
js prototype和__proto__的关系是什么
2019/08/23 Javascript
vue项目开启Gzip压缩和性能优化操作
2020/10/26 Javascript
[45:32]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python实现逆波兰计算表达式实例详解
2015/05/06 Python
Python中subprocess的简单使用示例
2015/07/28 Python
MySQL中表的复制以及大型数据表的备份教程
2015/11/25 Python
python 获取网页编码方式实现代码
2017/03/11 Python
python爬虫实战之爬取京东商城实例教程
2017/04/24 Python
Mac 上切换Python多版本
2017/06/17 Python
python制作填词游戏步骤详解
2019/05/05 Python
Django框架自定义模型管理器与元选项用法分析
2019/07/22 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
python实现对变位词的判断方法
2020/04/05 Python
python适合做数据挖掘吗
2020/06/16 Python
python 读取串口数据的示例
2020/11/09 Python
Python爬虫简单运用爬取代理IP的实现
2020/12/01 Python
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
红领巾广播站广播稿
2014/10/19 职场文书
信仰纪录片观后感
2015/06/08 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
餐厅如何利用“营销策略”扭转亏本局面
2019/10/15 职场文书
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android