web-dev-qa-db-fra.com

AngularJS watch tableau d'objets pour le changement de données

J'implémente un panier d'achat et souhaite stocker les données dans localStorage. Je veux regarder la variable $scope.cart Pour changer afin de pouvoir mettre à jour le localStorage

La variable panier ressemble à ceci:

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

Ceci est le code de la montre.

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

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

Il s'agit du code HTML où l'utilisateur modifie le modèle.

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

Avec le code suivant, la méthode updateCart() n'est jamais déclenchée. Je ne suis pas sûr de ce que je fais mal. Je vérifie que la variable $scope.cart A bien changé, mais la mise à jour n'a pas été déclenchée.

angularjswatch
36
harinsa

$watch n'évalue le paramètre chaîne ou fonction que dans son premier argument. Change ton $watch comme ça :

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

OR

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

Voir API de référence

39
EpokK

C'est une erreur courante que les gens utilisent une variable dans l'expression de la montre. pour $ scope.cart, vous devez utiliser à la place une expression de chaîne "cart". Par exemple,

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

AngularJs a une nouvelle méthode de surveillance, $ watchCollection . C'est fondamentalement la même chose que $ watch avec l'option d'égalité d'objet définie sur true pour observer le changement dans une propriété ou un élément de tableau.

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

Voici le lien vers le document AngularJs pour $ watchCollection. http://docs.angularjs.org/api/ng/type/$rootScope.Scope . La syntaxe est fondamentalement la même que $ watch sauf qu'elle n'a pas le 3ème paramètre (contrôle d'égalité d'objet)

26
Jin

essayer de changer

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

à

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

$ watch n'évalue que le paramètre chaîne ou fonction dans son premier argument

0
Roger Jin