如何在angularjs中深入观察数组？

在我的范围内有一个对象数组，我想看每个对象的所有值。

这是我的代码：

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

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

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

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

---

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

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

请参阅http://docs.angularjs.org/api/ng.$ro​​otScope.Scope#$watch

从Angular 1.1.x开始，您还可以使用$ watchCollection来观看集合的浅表（仅“第一级”）。

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

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

---

深度潜入$ watch中的对象会有性能上的影响。 有时（例如，当更改只是推入和弹出时），您可能想要$观看一个容易计算的值，如array.length。

---

如果你只看一个数组，你可以简单地使用这一点代码：

$scope.$watch('columns', function() {
  // some value in the array has changed 
}, true); // watching properties

例

但是这不适用于多个数组：

$scope.$watch('columns + ANOTHER_ARRAY', function() {
  // will never be called when things change in columns or ANOTHER_ARRAY
}, true);

例

为了处理这种情况，我通常会将我想要观看的多个数组转换为JSON：

$scope.$watch(function() { 
  return angular.toJson([$scope.columns, $scope.ANOTHER_ARRAY, ... ]); 
},
function() {
  // some value in some array has changed
}

例

正如@jssebastian在评论中指出的那样， JSON.stringify可能比angular.toJson更可取，因为它可以处理以'$'开头的成员以及其他可能的情况。

链接地址: http://www.djcxy.com/p/40703.html

上一篇: How to deep watch an array in angularjs?

下一篇: What is the difference between a deep copy and a shallow copy?