2013-07-02 3 views
33

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 aktualisierenAngularJS beobachten Array von Objekten für die Datenänderung

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.

Antwort

37

$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

+0

Ist '' '' im ersten Beispiel nicht unnötig? –

+6

$ scope.updateCart wird niemals ausgelöst, wenn Sie es in Klammern übergeben, da Sie das Ergebnis der Funktion an die $ watch übergeben würden, die in diesem Fall nicht definiert wäre. Der richtige Weg ist: $ scope. $ Watch ('cart', $ scope.updateCart, true); – SKuijers

+1

'cart' ist ein Array von Objekten, es hat keine Eigenschaften wie' Menge' – Hovo

1

versuchen

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

zu

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

$ bewerten nur String oder Funktionsparameter

in seinem ersten Argument
25

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)

+5

$ watchCollection hat mich gerettet, wenn ich Elemente aus einem Array schiebe/lösche. Vielen Dank! – Ziarno

+0

Es ist unklar, welche Art von Änderung der OP wollte, aber [wie hier] ($ stackoverflow.com/a/29189252/1175496) $ Watch (.., .., true) 'erkennt noch mehr Änderungen, nämlich diese Art der Änderung:' $ scope.cart [0] .name = "Foo Bar"; ' –

Verwandte Themen