Angular中使用$watch监听object属性值的变化(详解)
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Angular中使用$watch监听object属性值的变化(详解),小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1357字,纯文字阅读大概需要2分钟。
内容图文
![Angular中使用$watch监听object属性值的变化(详解)](/upload/InfoBanner/zyjiaocheng/345/39d54c9f8ede4382be3a4a55b1f1c38c.jpg)
Angular中的$watch可以监听属性值的变化,然后并做出相应处理。
常见用法:
$scope.$watch("person", function(n, o){ //todo something... })
但是对于一个对象中的某个属性值变化时,$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>
我们为输入框绑定了person对象的name属性,然而当我们改变输入框的值时候,{{person}}确实改变了,然而并没有出现我们想要的change字符。
效果:
我们需要为$watch方法额外添加一个true参数,使之达到我们想要的效果:
$scope.$watch("person", function(n, o){ if(n == o){ return; } $scope.status = "changed"; },true)
$watch方法完整的使用方式是这样的:
$watch(watchExpression, [listener], [objectEquality]);
第一个是监听的参数名称,剩下两个可选参数分别为处理函数和是相等比较的方式,对于后者文档如是说:Compare for object equality using angular.equals instead of comparing for reference equality. 即是否使用angular.equals方法进行比较。
如此效果变为:
以上这篇Angular中使用$watch监听object属性值的变化(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
内容总结
以上是互联网集市为您收集整理的Angular中使用$watch监听object属性值的变化(详解)全部内容,希望文章能够帮你解决Angular中使用$watch监听object属性值的变化(详解)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。