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

Posted 2023-03-11

【中文标题】AngularJS 监视对象数组以进行数据更改

【英文标题】：AngularJS watch array of objects for data change

【发布时间】：2013-06-29 08:22:33

【问题描述】：

我正在实现一个购物车并希望将数据存储在 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 变量确实发生了变化，但没有触发更新。

【参考方案1】：

尝试改变

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

到

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

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

【参考方案2】：

$watch 仅在其第一个参数中评估字符串或函数参数。像这样更改您的$watch：

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

或

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

见reference API

【讨论】：

在第一个例子中true不是不必要的吗？

$scope.updateCart 如果你用括号传递它，则永远不会触发，因为你会将函数的结果传递给 $watch ，在这种情况下它是未定义的。正确的做法是：$scope.$watch('cart', $scope.updateCart, true);

cart 是一个对象数组，它没有像amount这样的属性

@SKuijers 我猜这在本次编辑中已修复：***.com/revisions/17419684/3

@TheRedPea 是的，它似乎已修复。感谢 rubensMaruizzo 的编辑

【参考方案3】：

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

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

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

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

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

文档：$watchCollection。

【讨论】：

$watchColletion 在从数组中推送/删除项目时救了我。谢谢！

不清楚 OP 想要什么样的改变，但as seen here $watch(.., .., true) 检测到更多的改变，即这种改变：$scope.cart[0].name= "Foo Bar";