angularjs - 如何在AngularJS中深度观察数组？

Question

我的作用域中有一个对象数组，我想查看每个对象的所有值。

这是我的代码:

function TodoCtrl($scope) {
  $scope.columns = [
      { field:'title', displayName: 'TITLE'},
      { field: 'content', displayName: 'CONTENT' }
  ];
   $scope.$watch('columns', function(newVal) {
       alert('columns changed');
   });
}

但是当我修改这些值时，例如我将 TITLE 更改为 TITLE2，alert('columnschanged') 从未弹出。

如何深度观察数组内的对象？

有现场演示:http://jsfiddle.net/SYx9b/

Answer 1

您可以将$watch的第三个参数设置为true:

$scope.$watch('data', function (newVal, oldVal) { /*...*/ }, true);

参见https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch

自 Angular 1.1.x 起，您还可以使用 $watchCollection 来观看浅层监视(只是该集合的“第一级”)。

$scope.$watchCollection('data', function (newVal, oldVal) { /*...*/ });

参见https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watchCollection