AngularJS：来自控制器的 $watch 用于更改使用 ng-repeat 创建的属性

Question

如何在角度控制器中监听子属性的变化？从那个控制器知道哪个孩子被改变了？

HTML

<div ng-app ng-init='people = [{name: "bill", age: "11"}, {name: "jim", age: ""}, {name: "ryan", age: ""}]'>
  <h1> msg: {{ msg }} </h1>
  <table>
    <tr ng-repeat='person in people'>
      <td>
        {{ person.name }}
        <input ng-model='person.name'>      
      </td>
    </tr>
  </table>
</div>

编辑

例如，如果我想将 .highlight 类添加到每个具有年龄值的 <td> 中，我该怎么做？我是 Angular 的新手，但我认为 $watch 是正确的方法吗？因为值可能会在 UI 中更改，但更改可能来自其他地方。 父控制器需要更改值，并查明哪一个更改并添加类。

Answer 1

当需要深度 $watch 但不是针对整个对象时，您可以剔除不相关的数据，这样可以更快地进行比较。

示例：（Karl Seamon 的解决方案）

  $scope.$watch(function($scope) {
      return $scope.people.
          map(function(obj) {
            return obj.name
          });
}, function (newVal) {
        $scope.msg = 'person name was changed';
    }, true);

实时工作示例：http://jsfiddle.net/choroshin/uhrQ4/

更多信息请查看我的博客post。

Answer 2

您可以根据人员的年龄轻松申请课程，如下所示：

<td ng-class ='{highlight : person.age}'>

Angular 将为您创造奇迹，无需手动观察变化。

见http://jsfiddle.net/GAQvM/1/

---

编辑：$scope.$watchCollection 上的旧答案：

当您拼出要观看的实际项目时，它确实有效：

$scope.$watchCollection('[people[0].name, people[1].name, people[2].name]', 
    changeHappened);

http://jsfiddle.net/rCPvD/

我意识到这对于大型收藏并不完全可行，但我认为它指出手表很浅，只有一层深。

$watchCollection 的文档说（我的重点）：

Shallow 监视对象的属性并在任何时候触发 属性改变（对于数组，这意味着观察数组 项目;对于对象映射，这意味着查看属性）