Wie kann man ein Array in Angularjs genau beobachten?

In meinem Bereich befindet sich eine Reihe von Objekten. Ich möchte alle Werte jedes Objekts überwachen.

Das ist mein Code:

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

Aber wenn ich die Werte ändere, z. B. zu ändere TITLE, TITLE2ist das alert('columns changed')nie aufgetaucht.

Wie kann man die Objekte in einem Array genau beobachten?

Es gibt eine Live-Demo: http://jsfiddle.net/SYx9b/

Sie können das 3. Argument $watchauf setzen true:

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

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

Seit Angular 1.1.x können Sie auch $ watchCollection verwenden, um die flache Uhr (nur die "erste Ebene") der Sammlung anzusehen.

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

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

Das Tieftauchen eines Objekts in Ihrer $ watch hat Leistungsfolgen. Manchmal (z. B. wenn Änderungen nur Pushs und Pops sind) möchten Sie möglicherweise einen leicht zu berechnenden Wert wie array.length $ beobachten.

Wenn Sie nur ein Array ansehen möchten, können Sie einfach diesen Code verwenden:

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

Beispiel

Dies funktioniert jedoch nicht mit mehreren Arrays:

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

Beispiel

Um diese Situation zu bewältigen, konvertiere ich normalerweise die mehreren Arrays, die ich beobachten möchte, in JSON:

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

Beispiel

Wie @jssebastian in den Kommentaren hervorhob, ist dies JSON.stringifymöglicherweise vorzuziehenangular.toJson da es Mitglieder behandeln kann, die mit '$' beginnen, sowie mögliche andere Fälle.

Es ist erwähnenswert, dass Sie in Angular 1.1.x und höher jetzt $ watchCollection anstelle von $ watch verwenden können. Obwohl die $ watchCollection flache Uhren zu erstellen scheint, funktioniert sie nicht mit Arrays von Objekten, wie Sie es erwarten. Es kann Hinzufügungen und Löschungen zum Array erkennen, jedoch nicht die Eigenschaften von Objekten in Arrays.

Hier ist ein Vergleich der drei Möglichkeiten, wie Sie eine Bereichsvariable mit Beispielen anzeigen können:

$ watch () wird ausgelöst durch:

$scope.myArray = [];
$scope.myArray = null;
$scope.myArray = someOtherArray;

$ watchCollection () wird durch alles über AND ausgelöst:

$scope.myArray.push({}); // add element
$scope.myArray.splice(0, 1); // remove element
$scope.myArray[0] = {}; // assign index to different value

$ watch (..., true) wird durch ALLES über AND ausgelöst:

$scope.myArray[0].someProperty = "someValue";

NUR NOCH EINE SACHE...

$ watch () ist die einzige, die ausgelöst wird, wenn ein Array durch ein anderes Array ersetzt wird, selbst wenn dieses andere Array denselben exakten Inhalt hat.

Zum Beispiel, wo $watch()würde feuern und $watchCollection()nicht:

$scope.myArray = ["Apples", "Bananas", "Orange" ];

var newArray = [];
newArray.push("Apples");
newArray.push("Bananas");
newArray.push("Orange");

$scope.myArray = newArray;

Unten finden Sie einen Link zu einem Beispiel für JSFiddle, das alle verschiedenen Uhrenkombinationen verwendet und Protokollmeldungen ausgibt, um anzugeben, welche "Uhren" ausgelöst wurden:

http://jsfiddle.net/luisperezphd/2zj9k872/

$ watchCollection erreicht, was Sie tun möchten. Unten finden Sie ein Beispiel, das von der AngularJS-Website http://docs.angularjs.org/api/ng/type/$rootScope.Scope kopiert wurde. Obwohl dies praktisch ist, muss die Leistung berücksichtigt werden, insbesondere wenn Sie eine große Sammlung ansehen.

  $scope.names = ['igor', 'matias', 'misko', 'james'];
  $scope.dataCount = 4;

  $scope.$watchCollection('names', function(newNames, oldNames) {
     $scope.dataCount = newNames.length;
  });

  expect($scope.dataCount).toEqual(4);
  $scope.$digest();

  //still at 4 ... no changes
  expect($scope.dataCount).toEqual(4);

  $scope.names.pop();
  $scope.$digest();

  //now there's been a change
  expect($scope.dataCount).toEqual(3);

Diese Lösung hat bei mir sehr gut funktioniert, ich mache das in einer Direktive:

scope. $ watch (attrs.testWatch, function () {.....}, true);

Das wahre funktioniert ziemlich gut und reagiert auf alle Änderungen (Hinzufügen, Löschen oder Ändern eines Feldes).

Hier ist ein funktionierender Plunker zum Spielen.

Ein Array in AngularJS genau beobachten

Ich hoffe, das kann für Sie nützlich sein. Wenn Sie Fragen haben, zögern Sie nicht zu fragen, ich werde versuchen zu helfen :)

In meinem Fall musste ich einen Dienst überwachen, der ein Adressobjekt enthält, das auch von mehreren anderen Controllern überwacht wird. Ich steckte in einer Schleife fest, bis ich den Parameter 'true' hinzufügte, der der Schlüssel zum Erfolg beim Betrachten von Objekten zu sein scheint.

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

Das Einstellen des objectEqualityParameters (dritter Parameter) der $watchFunktion ist definitiv die richtige Methode, um ALLE Eigenschaften des Arrays zu überwachen.

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

Piran antwortet gut genug und erwähnt es $watchCollectionauch.

Mehr Details

Der Grund, warum ich eine bereits beantwortete Frage beantworte, ist, dass ich darauf hinweisen möchte, dass die Antwort von wizardwerdna nicht gut ist und nicht verwendet werden sollte.

Das Problem ist, dass die Digests nicht sofort stattfinden. Sie müssen warten, bis der aktuelle Codeblock vollständig ist, bevor sie ausgeführt werden. Beobachten Sie daher, wie das lengthArray tatsächlich einige wichtige Änderungen übersieht, $watchCollectiondie abfangen werden.

Nehmen Sie diese Konfiguration an:

$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');
});

Auf den ersten Blick scheint es, als würden diese gleichzeitig feuern, wie in diesem Fall:

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

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

Das funktioniert gut genug, aber bedenken Sie Folgendes:

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

// Console output
// testArray changed

Beachten Sie, dass die resultierende Länge war die gleiche , obwohl das Array ein neues Element hat und verloren ein Element, um zusehen , wie das $watchgeht, lengthhat sich nicht geändert. $watchCollectionnahm es jedoch auf.

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

// Console output
// testArray change

Das gleiche Ergebnis wird mit einem Push and Pop im selben Block erzielt.

Fazit

Um jede Eigenschaft im Array zu überwachen, verwenden Sie a $watchfür das Array selbst, wobei der dritte Parameter (objectEquality) enthalten ist und auf true gesetzt ist. Ja, das ist teuer, aber manchmal notwendig.

Verwenden Sie a, um zu beobachten, wann ein Objekt das Array betritt / verlässt $watchCollection.

Verwenden Sie NICHT a $watchfür die lengthEigenschaft des Arrays. Es gibt fast keinen guten Grund, warum ich mir das vorstellen kann.