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

我正在实现一个购物车，希望将数据存储在localStorage中。 我想查看变量

$scope.cart

的变化，以便更新localStorage

cart变量如下所示：

[{'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>

{{item.name}

对于以下代码，永远不会触发

updateCart（）

方法。我不确定我做错了什么。我检查

$scope.cart

变量是否已更改，但更新未触发。

尝试更改

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

到

---

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

$watch

仅在其第一个参数中计算字符串或函数参数。将您的

$watch

更改如下：

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

或

---

请参见

将变量用作watch表达式的第一个参数是一个常见错误

对于

$scope.cart

，应使用字符串

cart

：

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

AngularJs有一个新的监视方法，

$watchCollection

。它基本上与

$watch

相同，将object equality选项设置为true，以监视属性或数组项中的更改

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

---

文档：.

在第一个示例中，

true

不是不必要的吗？$scope.updateCart将永远不会触发，如果您用括号传递它，因为您会将函数的结果传递给$watch，而在这种情况下，$watch是未定义的。正确的方法是：$scope.$watch（'cart'，$scope.updateCart，true）

cart

是一个对象数组，它没有像

amount

@SKuijers这样的属性，我想这在这次编辑中是固定的：@TheRedPea是的，它似乎是固定的。感谢rubensMaruizzo的编辑$watchColletion，在从阵列中推送/删除项目时为我节省了时间。谢谢尚不清楚OP想要什么样的更改，但

$watch（…，…，true）

检测到更多的更改，即这种类型的更改：

$scope.cart[0].name=“Foo-Bar”
$scope.$watch('cart', function () {...}, true)

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