AngularJS regarder tableau d'objets pour la modification de données
j'implémente un panier d'achat et je veux stocker les données dans le stockage local.
Je veux regarder la variable $scope.cart pour changer pour que je puisse mettre à jour le stockage local
la variable cart ressemble à ceci:
[{'name':'foo', 'id':'bar', 'amount': 1 },...]
c'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);
C'est le HTML où l'utilisateur change le modèle.
<li ng-repeat="item in cart">
{{item.name}} <input type="text" ng-model="item.amount">
</li>
avec le code suivant, le updateCart() la méthode n'est jamais déclenché. Je ne suis pas sûr de ce que je fais de mal. Je vérifie que la variable $scope.cart a bien changé, mais la mise à jour n'a pas été déclenchée.
3 réponses
$watch évalue uniquement la chaîne ou le paramètre de fonction dans son premier argument. Changez votre $watch comme ceci:
$scope.$watch('cart.name + cart.id + cart.amount', $scope.updateCart());
ou
$scope.$watch('cart', $scope.updateCart, true);
voir API de référence
c'est une erreur courante que les gens utilisent la variable dans l'expression watch. pour la somme de portée.cart, vous devriez utiliser l'expression 'cart' à la place. Par exemple,
$scope.$watch('cart', function () {...}, true)
AngularJs a une nouvelle méthode de montre, $ watchCollection . Il est essentiellement le même que $watch avec l'option d'égalité objet définie à true pour regarder le changement dans une propriété ou un élément de tableau.
$scope.$watchCollection('cart', function () {...});
voici le lien vers AngularJs doc pour $ watchCollection. http://docs.angularjs.org/api/ng/type / $ rootScope.Champ d'application . La syntaxe est essentiellement la même que $ watch sauf qu'il n'a pas le 3ème param (contrôle d'égalité d'objet)
essayer de "changer de 151930920"
$scope.$watch($scope.cart, $scope.updateCart(), true);
à
$scope.$watch('cart', $scope.updateCart(), true);
$regarder seulement évaluer la chaîne ou les paramètres de la fonction dans son premier argument