Aditya M P Aditya M P - 2 months ago 42
AngularJS Question

How to $watch changes on models created by ng-repeat?

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);
});
});

Answer

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>