example - AngularJS mira la matriz de objetos para el cambio de datos
angularjs watch object (3)
Estoy implementando un carrito de compras y quiero almacenar los datos en localStorage. Quiero ver la variable $scope.cart para cambiar para poder actualizar el localStorage
La variable de carrito tiene el siguiente aspecto:
[{''name'':''foo'', ''id'':''bar'', ''amount'': 1 },...]
Este es el código para el reloj.
$scope.updateCart = function(){
localStorageService.add(''cart'',JSON.stringify($scope.cart));
alert(''cart updated'');
};
$scope.$watch($scope.cart, $scope.updateCart(), true);
Este es el HTML donde el usuario cambia el modelo.
<li ng-repeat="item in cart">
{{item.name}} <input type="text" ng-model="item.amount">
</li>
Con el siguiente código, el método updateCart() nunca se desencadena. No estoy seguro de lo que estoy haciendo mal. Compruebo que la variable $scope.cart sí cambió, pero la actualización no se activó.
Es un error común que las personas usen variables en la expresión del reloj. para $ scope.cart, debe usar una expresión de cadena ''carro'' en su lugar. Por ejemplo,
$scope.$watch(''cart'', function () {...}, true)
AngularJs tiene un nuevo método de reloj, $ watchCollection . Básicamente es lo mismo que $ watch con la opción de igualdad de objetos establecida en true para ver el cambio en una propiedad o elemento de una matriz.
$scope.$watchCollection(''cart'', function () {...});
Aquí está el enlace a AngularJs doc for $ watchCollection. http://docs.angularjs.org/api/ng/type/$rootScope.Scope . La sintaxis es básicamente la misma que $ watch, excepto que no tiene el 3er parámetro (verificación de igualdad de objetos)
Trata de cambiar
$scope.$watch($scope.cart, $scope.updateCart(), true);
a
$scope.$watch(''cart'', $scope.updateCart(), true);
$ watch solo evalúa cadena o parámetro de función en su primer argumento
$watch solo evalúa cadena o parámetro de función en su primer argumento. Cambia tu $watch así:
$scope.$watch(''cart.name + cart.id + cart.amount'', $scope.updateCart());
O
$scope.$watch(''cart'', $scope.updateCart, true);