AngularJS beobachten Array von Objekten für die Datenänderung

Question

Ich bin ein Einkaufswagen implementieren und möchte die Daten in localStorage speichern. Ich möchte die Variable $scope.cart für den Wandel beobachten, so dass ich die localstorage aktualisieren

Die Karre Variable wie folgt aussieht:

[{'name':'foo', 'id':'bar', 'amount': 1 },...] 

Dies ist der Code für die Uhr ist.

$scope.updateCart = function(){ 
    localStorageService.add('cart',JSON.stringify($scope.cart)); 
    alert('cart updated'); 
}; 

$scope.$watch($scope.cart, $scope.updateCart(), true); 

Dies ist der HTML-Code, in dem der Benutzer das Modell ändert.

<li ng-repeat="item in cart"> 
    {{item.name}} <input type="text" ng-model="item.amount"> 
</li> 

Mit dem folgenden Code, die updateCart() Methode wird nie ausgelöst. Ich bin mir nicht sicher, was ich falsch mache. Ich überprüfe, dass sich die $scope.cart Variable geändert hat, aber das Update wurde nicht ausgelöst.

Answer 1

$watch nur auswerten String oder Funktionsparameter in ihrem ersten Argument sehen zu ändern. Ändern Sie Ihre $watch wie folgt aus:

$scope.$watch('cart.name + cart.id + cart.amount', $scope.updateCart()); 

ODER

$scope.$watch('cart', $scope.updateCart, true); 

Siehe reference API

Answer 2

versuchen

$scope.$watch($scope.cart, $scope.updateCart(), true); 

zu

$scope.$watch('cart', $scope.updateCart(), true); 

$ bewerten nur String oder Funktionsparameter

in seinem ersten Argument

Answer 3

Es ist ein weit verbreiteter Irrtum, dass die Menschen Variable in der Uhren Ausdruck verwenden. Für $ scope.cart sollten Sie stattdessen den Zeichenfolgenausdruck 'cart' verwenden. Zum Beispiel

$scope.$watch('cart', function() {...}, true) 

AngularJS hat eine neue Uhr Methode, $ watchCollection. Es ist im Grunde dasselbe wie $ watch, wobei die Objektzuordnungsoption auf "true" gesetzt ist, um die Änderung in einer Eigenschaft oder einem Arrayelement zu beobachten.

$scope.$watchCollection('cart', function() {...}); 

Hier ist der Link zu AngularJs doc für $ watchCollection. http://docs.angularjs.org/api/ng/type/$rootScope.Scope. Die Syntax ist im Grunde die gleiche wie bei $ watch, außer dass sie nicht den 3. Parameter hat (Objektgleichheitsprüfung)