angularjs – 如何$观看由ng-repeat创建的模型的更改?

前端之家收集整理的这篇文章主要介绍了angularjs – 如何$观看由ng-repeat创建的模型的更改?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
例如考虑 this Plnkr。我不知道将会创建多少fooCollection的成员。所以我不知道有多少条模型会存在。

但我知道他们将是有角度的模型,我知道他们会在哪里。

我如何做一个$手表这些?

我需要这样做,因为我需要在改变条形模型时触发行为。观察fooCollection本身是不够的,当改变条形时,$ watch监听器不会触发。

相关html:

@H_301_9@<body ng-controller="testCtrl"> <div ng-repeat="(fooKey,foo) in fooCollection"> Tell me your name: <input ng-model="foo.bar"> <br /> Hello,my name is {{ foo.bar }} </div> <button ng-click="fooCollection.push([])">Add a Namer</button> </body>

相关JS:

@H_301_9@angular .module('testApp',[]) .controller('testCtrl',function ($scope) { $scope.fooCollection = []; $scope.$watch('fooCollection',function (oldValue,newValue) { if (newValue != oldValue) console.log(oldValue,newValue); }); });
创建单个列表项目控制器: demo on Plnkr

js

@H_301_9@angular .module('testApp',[]) .controller('testCtrl',function ($scope) { $scope.fooCollection = []; }) .controller('fooCtrl',function ($scope) { $scope.$watch('foo.bar',function (newValue,oldValue) { console.log('watch fired,new value: ' + newValue); }); });

HTML

@H_301_9@<html ng-app="testApp"> <body ng-controller="testCtrl"> <div ng-repeat="(fooKey,foo) in fooCollection" ng-controller="fooCtrl"> Tell me your name: <input ng-model="foo.bar" ng-change="doSomething()"> <br /> Hello,my name is {{ foo.bar }} </div> <button ng-click="fooCollection.push([])">Add a Namer</button> </body> </html>

猜你在找的Angularjs相关文章