AngularJS следит за массивом объектов для изменения данных

Я реализую корзину и хочу хранить данные в 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 изменилась, но обновление не сработало.


angularjs watch
person harinsa    schedule 02.07.2013    source источник

Ответы (3)


arrow_upward
41
arrow_downward

$watch оценивает строку или параметр функции только в первом аргументе. Измените свой $watch следующим образом:

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

OR

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

См. справочный API.

person EpokK    schedule 02.07.2013
comment
Разве true не является ненужным в первом примере? - person Tomasz Kowalczyk; 21.10.2013
comment
$scope.updateCart никогда не сработает, если вы передадите его в круглых скобках, поскольку вы передадите результат функции в $watch, который в этом случае будет неопределенным. Правильный способ: $scope.$watch('cart', $scope.updateCart, true); - person SKuijers; 20.04.2015
comment
cart — это массив объектов, у него нет таких свойств, как amount - person Hovo; 04.07.2016
comment
@SKuijers Думаю, это было исправлено в этом редактировании: stackoverflow.com/revisions/17419684/3 - person The Red Pea; 16.04.2017
comment
@TheRedPea да, кажется, исправлено. Спасибо rubensMaruizzo за редактирование - person SKuijers; 24.04.2017

arrow_upward
28
arrow_downward

Распространенной ошибкой является использование переменной в качестве первого параметра выражения наблюдения.

Для $scope.cart следует использовать строку cart:

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

В AngularJs есть новый метод наблюдения, $watchCollection. Это в основном то же самое, что и $watch с опцией равенства объектов, установленной в true, чтобы следить за изменением свойства или элемента массива.

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

Документация: $watchCollection.

person Jin    schedule 23.03.2014
comment
$watchColletion спас меня при добавлении/удалении элементов из массива. Спасибо! - person Ziarno; 12.05.2015
comment
Неясно, какое изменение хотел OP, но как видно здесь $watch(.., .., true) обнаруживает еще больше изменений, а именно этот тип изменений: $scope.cart[0].name= "Foo Bar"; - person The Red Pea; 27.11.2016

arrow_upward
1
arrow_downward

попробуй изменить

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

to

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

$watch оценивает только строку или параметр функции в первом аргументе

person Roger Jin    schedule 02.07.2013