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 相关文章推荐
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
Jan 11 Javascript
JS解析XML的实现代码
Nov 12 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
Nov 11 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
Apr 01 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
详解Javascript函数声明与递归调用
Oct 22 Javascript
vue-router 路由基础的详解
Oct 17 Javascript
swiper插件自定义切换箭头按钮
Dec 28 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 19 Javascript
vue实现PC端分辨率适配操作
Aug 03 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
在数据量大(超过10万)的情况下
2007/01/15 PHP
PHP Class&Object -- 解析PHP实现二叉树
2013/06/25 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
php实例化一个类的具体方法
2019/09/19 PHP
JS 控制小数位数的实现代码
2011/08/02 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
Nodejs中自定义事件实例
2014/06/20 NodeJs
浅析Node.js的Stream模块中的Readable对象
2015/07/29 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
2016/01/21 Javascript
js面向对象的写法
2016/02/19 Javascript
JS作为值的函数用法示例
2016/06/20 Javascript
jquery加载单文件vue组件的方法
2017/06/20 jQuery
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
2020/08/24 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
windows上安装Anaconda和python的教程详解
2017/03/28 Python
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
基于Django filter中用contains和icontains的区别(详解)
2017/12/12 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
Python3中_(下划线)和__(双下划线)的用途和区别
2019/04/26 Python
python是否适合网页编程详解
2019/10/04 Python
opencv+python实现均值滤波
2020/02/19 Python
Python变量及数据类型用法原理汇总
2020/08/06 Python
波兰最大的宠物用品网上商店:FERA.PL
2019/08/11 全球购物
求职推荐信
2013/10/28 职场文书
大学生如何写自荐信
2014/01/08 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
关于倡议书的范文
2015/04/29 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
2016年春节问候语
2015/11/11 职场文书
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js
CentOS MySql8 远程连接实战
2022/04/19 MySQL