如何在ng-repeat创建的模型上监视变化? [英] How to $watch changes on models created by ng-repeat?
问题描述
例如，考虑此Plnkr .我不知道会预先创建多少个fooCollection成员.所以我不知道会有多少bar个模型.
Consider this Plnkr for example. I don't know how many members of fooCollection will be created beforehand. So I don't know how many bar models are going to exist.
但是我知道它们将成为角度模型，而且我知道它们将在哪里.
But I know they are going to be angular models, and I know where they are going to be.
我如何在这些上做一个$watch?
How do I do a $watch on these?
我需要这样做，因为我需要在更改bar模型时触发行为.仅仅观察fooCollection本身是不够的，更改bar时$watch侦听器不会触发.
I need to do that because I need to trigger behavior when a bar model is changed. Watching the fooCollection itself is not enough, the $watch listener does not fire when a bar is changed.
相关html:
<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:
angular
.module('testApp', [])
.controller('testCtrl', function ($scope) {
$scope.fooCollection = [];
$scope.$watch('fooCollection', function (oldValue, newValue) {
if (newValue != oldValue)
console.log(oldValue, newValue);
});
});
推荐答案
创建单个列表项控制器:在Plnkr上演示
Create individual list-item controllers: demo on Plnkr
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
<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>
这篇关于如何在ng-repeat创建的模型上监视变化?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
