AngularJS controlla la matrice di oggetti per la modifica dei dati

Question

Sto implementando un carrello acquisti e desidero memorizzare i dati in localStorage. Voglio guardare la variabile $scope.cart per il cambiamento in modo da poter aggiornare il localStorage

La variabile carrello si presenta così:

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

Questo è il codice per l'orologio.

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

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

Questo è l'HTML in cui l'utente cambia il modello.

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

Con questo codice, il metodo updateCart() non viene mai attivato. Non sono sicuro di cosa sto sbagliando. Controllo che la variabile $scope.cart sia stata modificata, ma l'aggiornamento non è stato attivato.

Answer 1

$watch valutare solo stringa o parametro di funzione nel suo primo argomento. Cambia la tua $watch in questo modo:

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

O

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

Vedi reference API

Answer 2

tenta di modificare

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

a

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

$ guardano solo valutare stringa o parametro di funzione nel suo primo argomento

Answer 3

E 'un errore comune che la gente usa variabile nell'espressione orologio. per $ scope.cart, dovresti usare invece un'espressione stringa 'cart'. Ad esempio,

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

AngularJs ha un nuovo metodo di orologio, $ watchCollection. È fondamentalmente uguale a $ watch con l'opzione di uguaglianza dell'oggetto impostata su true per osservare la modifica in una proprietà o in un elemento dell'array.

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

Questo è il collegamento al documento AngularJs per $ watchCollection. http://docs.angularjs.org/api/ng/type/$rootScope.Scope. La sintassi è fondamentalmente la stessa di $ watch eccetto che non ha il 3 ° parametro (controllo di uguaglianza degli oggetti)