如何深度觀察angularjs中的數組？

本文翻譯自：How to deep watch an array in angularjs?

There is an array of objects in my scope, I want to watch all the values of each object. 我的範圍中有一個對象數組，我想要觀察每個對象的所有值。

This is my code: 這是我的代碼：

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

But when I modify the values, eg I change TITLE to TITLE2 , the alert('columns changed') never popped. 但是當我修改值時，例如我將TITLE更改爲TITLE2 ， alert('columns changed')從未彈出。

How to deep watch the objects inside an array? 如何深入觀察數組內的對象？

There is a live demo: http://jsfiddle.net/SYx9b/ 有一個現場演示： http ： //jsfiddle.net/SYx9b/

---

#1樓

參考：https://stackoom.com/question/zjHl/如何深度觀察angularjs中的數組

---

#2樓

If you're going to watch only one array, you can simply use this bit of code: 如果你只想觀看一個數組，你可以簡單地使用這段代碼：

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

example 例

But this will not work with multiple arrays: 但這不適用於多個數組：

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

example 例

To handle this situation, I usually convert the multiple arrays I want to watch into JSON: 爲了處理這種情況，我通常將我想要觀看的多個數組轉換爲JSON：

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

example 例

As @jssebastian pointed out in the comments, JSON.stringify may be preferable to angular.toJson as it can handle members that start with '$' and possible other cases as well. 正如@jssebastian在評論中指出的那樣， JSON.stringify可能比angular.toJson更可取，因爲它可以處理以'$'開頭的成員以及可能的其他情況。

---

#3樓

You can set the 3rd argument of $watch to true : 您可以將$watch的第3個參數設置爲true ：

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

See https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch 請參閱https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch

Since Angular 1.1.x you can also use $watchCollection to watch shallow watch (just the "first level" of) the collection. 從Angular 1.1.x開始，您還可以使用$ watchCollection來觀看淺表（只是“第一級”）的集合。

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

See https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watchCollection 請參閱https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watchCollection

---

#4樓

There are performance consequences to deep-diving an object in your $watch. 在你的$ watch中深度潛水物體會產生性能影響。 Sometimes (for example, when changes are only pushes and pops), you might want to $watch an easily calculated value, such as array.length. 有時（例如，當更改只是推送和彈出時），您可能希望$觀察一個容易計算的值，例如array.length。

---

#5樓

It's worth noting that in Angular 1.1.x and above, you can now use $watchCollection rather than $watch. 值得注意的是，在Angular 1.1.x及更高版本中，您現在可以使用$ watchCollection而不是$ watch。 Although the $watchCollection appears to create shallow watches so it won't work with arrays of objects like you expect. 雖然$ watchCollection似乎創建了淺表，但它不能像你期望的那樣使用對象數組。 It can detect additions and deletions to the array, but not the properties of objects inside arrays. 它可以檢測數組的添加和刪除，但不能檢測數組內對象的屬性。

---

#6樓

This solution worked very well for me, i'm doing this in a directive: 這個解決方案對我很有用，我在一個指令中這樣做：

scope.$watch(attrs.testWatch, function() {.....}, true); 範圍。$ watch（attrs.testWatch，function（）{.....}，true）;

the true works pretty well and react for all the chnages (add, delete, or modify a field). 真實的工作非常好，並對所有的chnages做出反應（添加，刪除或修改字段）。

Here is a working plunker for play with it. 這是一個可以玩它的工作的plunker。

Deeply Watching an Array in AngularJS 在AngularJS中深入觀察數組

I hope this can be useful for you. 我希望這對你有用。 If you have any questions, feel free for ask, I'll try to help :) 如果您有任何疑問，請隨時提問，我會盡力幫助:)