• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > Angular中使用$watch监听object属性值的变化(详解)

Angular中使用$watch监听object属性值的变化(详解)

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

通过本文主要向大家介绍了angular.isobject,angular watch,angular js watch,angular js详解,java object类详解等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

Angular中的$watch可以监听属性值的变化,然后并做出相应处理。

常见用法:

$scope.$watch("person", function(n, o){
  //todo something...
})

</div>

 

但是对于一个对象中的某个属性值变化时,$watch似乎不管用了。

示例代码:

<body>
  <div ng-controller="mainCtrl">
    <input id="myText" type="text" ng-model="person.name"/>
    <h2>{{person}}</h2>
    <h2>Status: {{status}}</h2>
  </div>
  <script>
  angular.module('myApp', [])
    .controller('mainCtrl', function ($scope) {
      $scope.person = {
        name:"allen",
        age:21
      }

      $scope.$watch("person", function(n, o){
        //取消第一次加载时的监听响应
        if(n == o){
          return;
        }
        $scope.status = "changed"
      })
  })
</script>
</body>

</div>

 

我们为输入框绑定了person对象的name属性,然而当我们改变输入框的值时候,{{person}}确实改变了,然而并没有出现我们想要的change字符。

效果:

 我们需要为$watch方法额外添加一个true参数,使之达到我们想要的效果:

$scope.$watch("person", function(n, o){
  if(n == o){
    return;
  }
  $scope.status = "changed";
},true)

</div>

$watch方法完整的使用方式是这样的:

$watch(watchExpression, [listener], [objectEquality]);

第一个是监听的参数名称,剩下两个可选参数分别为处理函数和是相等比较的方式,对于后者文档如是说:Compare for object equality using angular.equals instead of comparing for reference equality. 即是否使用angular.equals方法进行比较。

如此效果变为:

以上这篇Angular中使用$watch监听object属性值的变化(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

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

  • Angular中使用$watch监听object属性值的变化(详解)

相关文章

  • 2017-05-11JavaScript字符串对象(string)基本用法示例
  • 2017-08-26Math对象常用属性与方法详解
  • 2017-05-11基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
  • 2017-05-11JavaScript获取键盘按键的键码(参照表)
  • 2017-05-11最常见和最有用的字符串相关的方法详解
  • 2017-05-11Jquery与Bootstrap实现后台管理页面增删改查功能示例
  • 2017-05-11nodejs中使用HTTP分块响应和定时器示例代码
  • 2017-05-11ES6中的箭头函数实例详解
  • 2017-05-11纯javaScript、jQuery实现个性化图片轮播【推荐】
  • 2017-05-11js实现选项卡内容切换以及折叠和展开效果【推荐】

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • javascript实现简易计算器
    • 复制网页内容后自动添加版权文字的方法(兼容IE、Firefox和Chrome)
    • 详解Angularjs 如何自定义Img的ng-load 事件
    • Vue.js:使用Vue-Router 2实现路由功能介绍
    • Vue.js实战之使用Vuex + axios发送请求详解
    • AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
    • JS字符串false转boolean的方法(推荐)
    • fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
    • js 将input框中的输入自动转化成半角大写(税号输入框)
    • js弹出窗口简单实现代码

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

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