如何 $watch 由 ng-repeat 创建的模型的变化? [英] How to $watch changes on models created by ng-repeat?
问题描述
以 这个 Plnkr 为例.我不知道会预先创建多少个 fooCollection 成员.所以我不知道会有多少 bar 模型存在.
但我知道它们将成为角度模型，而且我知道它们将在哪里.
我如何对这些进行 $watch 操作?
我需要这样做，因为我需要在 bar 模型更改时触发行为.观察 fooCollection 本身是不够的，$watch 监听器不会在 bar 改变时触发.
相关html:
<div ng-repeat="(fooKey, foo) in fooCollection">告诉我你的名字:<br/>你好，我的名字是 {{ foo.bar }}<button ng-click="fooCollection.push([])">添加名称</button>
相关JS:
角度.module('testApp', []).controller('testCtrl', function ($scope) {$scope.fooCollection = [];$scope.$watch('fooCollection', function (oldValue, newValue) {如果(新值！= 旧值)控制台日志(旧值，新值)；});});创建单独的列表项控制器:Plnkr 上的演示
js
角度.module('testApp', []).controller('testCtrl', function ($scope) {$scope.fooCollection = [];}).controller('fooCtrl', function ($scope) {$scope.$watch('foo.bar', function (newValue, oldValue) {console.log('手表被触发，新值:' + newValue);});});HTML
<body ng-controller="testCtrl"><div ng-repeat="(fooKey, foo) in fooCollection" ng-controller="fooCtrl">告诉我你的名字:<input ng-model="foo.bar" ng-change="doSomething()"><br/>你好，我的名字是 {{ foo.bar }}<button ng-click="fooCollection.push([])">添加名称</button></html>
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.
How do I do a $watch on these?
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.
Relevant 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>
Relevant JS:
angular
.module('testApp', [])
.controller('testCtrl', function ($scope) {
$scope.fooCollection = [];
$scope.$watch('fooCollection', function (oldValue, newValue) {
if (newValue != oldValue)
console.log(oldValue, newValue);
});
});
Create individual list-item controllers: demo on Plnkr
js
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>
这篇关于如何 $watch 由 ng-repeat 创建的模型的变化?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
