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的文档说（我的重点）：

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

AngularJS：$从控制器观察用ng-repeat创建的属性的变化

2 个答案: