Question

我正在实施购物车，并希望将数据存储在localStorage中。我想看变量$scope.cart进行更改，以便我可以更新localStorage

购物车变量如下所示：

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

这是手表的代码。

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

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

这是用户更改模型的HTML。

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

使用以下代码，永远不会触发updateCart()方法。我不确定我做错了什么。我检查$scope.cart变量确实发生了变化，但未触发更新。

Answer 1

$watch仅在其第一个参数中计算字符串或函数参数。像这样更改$watch：

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

OR

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

请参阅reference API

Answer 2

人们在监视表达式中使用变量是一个常见的错误。对于$ scope.cart，您应该使用字符串表达式'cart'。例如，

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

AngularJs有一种新的监视方法 $ watchCollection 。它基本上与$ watch相同，对象相等性选项设置为true以观察属性或数组项的更改。

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

以下是$ watchCollection的AngularJs doc链接。 http://docs.angularjs.org/api/ng/type/$rootScope.Scope。语法与$ watch基本相同，除了它没有第3个参数（对象相等性检查）

Answer 3

尝试改变

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

到

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

$ watch仅在第一个参数中评估字符串或函数参数

AngularJS监视数据更改对象的数组

3 个答案: