Tablica obserwacyjna AngularJS obiektów do zmiany danych

Question

Wprowadzam koszyk i chcę przechowywać dane w localStorage. chcę oglądać zmiennej $scope.cart na zmianę tak, że mogę zaktualizować localStorage

Zmienna koszyk wygląda tak:

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

Jest to kod na zegarek.

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

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

To jest kod HTML, w którym użytkownik zmienia model.

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

Przy pomocy następującego kodu metoda updateCart() nigdy nie zostanie wyzwolona. Nie jestem pewien, co robię źle. Sprawdzam, czy zmienna $scope.cart uległa zmianie, ale aktualizacja nie została uruchomiona.

Answer 1

$watch tylko ocenić ciąg lub parametr funkcji w swoim pierwszym argumencie. Zmienić $watch takiego:

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

LUB

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

Zobacz reference API

Answer 2

próbować zmienić

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

do

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

$ oglądać tylko ocenić ciąg lub parametr funkcji w pierwszym argumencie

Answer 3

Jest to częsty błąd, że ludzie używają zmiennej w wyrażeniu zegarka. dla $ scope.cart należy zamiast tego użyć wyrażenia tekstowego "cart". Na przykład,

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

angularjs ma nowy sposób oglądania, $ watchCollection. Zasadniczo jest to to samo co $ watch z opcją równości obiektu ustawioną na true, aby obserwować zmianę właściwości lub elementu tablicy.

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

Oto link do dokumentu AngularJs dla $ watchCollection. http://docs.angularjs.org/api/ng/type/$rootScope.Scope. Składnia jest w zasadzie taka sama jak $ watch, z wyjątkiem tego, że nie ma 3. parametru (kontrola równości obiektów).