angularjs - AngularJS 监视对象数组以进行数据更改

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());

或者

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

请参阅参考 API

Answer 2

使用变量作为监视表达式的第一个参数是一个常见的错误。

对于$scope.cart，您应该使用字符串cart：

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

AngularJs 有一个新的 watch 方法，$watchCollection. 它基本上$watch与将对象相等选项设置为 true 相同，以观察属性或数组项的变化。

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

文档：$watchCollection。

Answer 3

尝试改变

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

至

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

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