在我的作用域中有一个对象数组,我想观察每个对象的所有值。

这是我的代码:

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

但是当我修改值时,例如我将TITLE更改为TITLE2,警报('列已更改')从未弹出。

如何深度观看数组内的对象?

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


当前回答

这个解决方案对我来说非常有效,我在一个指令中这样做:

范围。看(attrs美元。testWatch, function() {.....},真正的);

true工作得很好,并响应所有更改(添加、删除或修改字段)。

这是一个工作的活塞玩它。

在AngularJS中深度观察一个数组

我希望这对你有用。 如果你有任何问题,请尽管问,我会尽力帮助你的:)

其他回答

如果你只看一个数组,你可以简单地使用这段代码:

$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,因为它可以处理以“$”开头的成员,也可以处理其他可能的情况。

在我的例子中,我需要监视一个服务,该服务包含一个地址对象,也由其他几个控制器监视。我陷入了一个循环,直到我添加了“true”参数,这似乎是观察对象时成功的关键。

$scope.$watch(function() {
    return LocationService.getAddress();
}, function(address) {
    //handle address object
}, true);

这个解决方案对我来说非常有效,我在一个指令中这样做:

范围。看(attrs美元。testWatch, function() {.....},真正的);

true工作得很好,并响应所有更改(添加、删除或修改字段)。

这是一个工作的活塞玩它。

在AngularJS中深度观察一个数组

我希望这对你有用。 如果你有任何问题,请尽管问,我会尽力帮助你的:)

在$watch中深潜一个对象会对性能造成影响。有时(例如,当更改仅为推和弹出时),您可能希望$watch一个容易计算的值,例如array.length。

设置$watch函数的objectEquality参数(第三个参数)绝对是监视数组所有属性的正确方法。

$scope.$watch('columns', function(newVal) {
    alert('columns changed');
},true); // <- Right here

Piran很好地回答了这个问题,并提到了$watchCollection。

更详细地

我之所以要回答一个已经回答过的问题,是因为我想指出wizardwerdna的答案不是一个好的答案,不应该被使用。

问题是,摘要不会立即发生。它们必须等到当前代码块完成后才能执行。因此,观察数组的长度实际上可能会错过$watchCollection将捕捉到的一些重要更改。

假设如下配置:

$scope.testArray = [
    {val:1},
    {val:2}
];

$scope.$watch('testArray.length', function(newLength, oldLength) {
    console.log('length changed: ', oldLength, ' -> ', newLength);
});

$scope.$watchCollection('testArray', function(newArray) {
    console.log('testArray changed');
});

乍一看,这些似乎会同时发射,比如在这个例子中:

function pushToArray() {
    $scope.testArray.push({val:3});
}
pushToArray();

// Console output
// length changed: 2 -> 3
// testArray changed

这很好,但考虑一下:

function spliceArray() {
    // Starting at index 1, remove 1 item, then push {val: 3}.
    $testArray.splice(1, 1, {val: 3});
}
spliceArray();

// Console output
// testArray changed

请注意,即使数组有一个新元素和丢失了一个元素,结果的长度是相同的,因此对于$watch而言,长度没有改变。不过$watchCollection发现了它。

function pushPopArray() {
    $testArray.push({val: 3});
    $testArray.pop();
}
pushPopArray();

// Console output
// testArray change

同样的结果也发生在同一个块的push和pop操作中。

结论

要观察数组中的每个属性,在数组本身上使用$watch,其中包括第三个参数(objectEquality)并将其设置为true。是的,这很昂贵,但有时是必要的。

要观察对象何时进入/退出数组,使用$watchCollection。

不要在数组的length属性上使用$watch。我几乎想不出有什么好的理由这样做。