• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >AngularJS > AngularJS实现一次监听多个值发生的变化

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

作者:MakingChoice 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含angularjs 多个ng app,angularjs 多个控制器,angularjs 监听,angularjs监听事件,angularjs 监听input等相关知识,MakingChoice 希望在学习及工作中可以帮助到您

一、$watch简单使用

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

$watch(watchExpression, listener, objectEquality);
</div>

每个参数的说明如下:

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);
</div>

二、监听多个值的变化

大家通常遇到的情况为通过$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);
      }])
</div>

总结

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

</div>

您可能想查找下面的文章:

  • AngularJS 在同一个界面启动多个ng-app应用模块详解
  • AngularJS实现一次监听多个值发生的变化

相关文章

  • 2017-05-30angularjs自定义ng-model标签的属性
  • 2017-05-30Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
  • 2017-05-30AngularJS基础 ng-model 指令详解及示例代码
  • 2017-05-30Angular获取手机验证码实现移动端登录注册功能
  • 2017-05-30AngularJS中取消对HTML片段转义的方法例子
  • 2017-05-30AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
  • 2017-05-30基于angularjs实现图片放大镜效果
  • 2017-05-30Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
  • 2017-05-30angularjs实现文字上下无缝滚动特效代码
  • 2017-05-30AngularJs学习第八篇 过滤器filter创建

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • AngularJS ng-repeat数组有重复值的解决方法
    • angular和BootStrap3实现购物车功能
    • AngularJS教程 ng-style 指令简单示例
    • Angular实现form自动布局
    • Angular 应用技巧总结
    • Angular.js中处理页面闪烁的方法详解
    • Angular.JS学习之依赖注入$injector详析
    • angularjs实现首页轮播图效果
    • AngularJS iframe跨域打开内容时报错误的解决办法
    • AngularJs解决跨域问题案例详解(简单方法)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有