web-dev-qa-db-ja.com

AngularJSは、データ変更のオブジェクトの配列を監視します

ショッピングカートを実装していて、localStorageにデータを保存したい。 localStorageを更新できるように、変数_$scope.cart_の変更を監視したい

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>
_

次のコードでは、updateCart()メソッドはトリガーされません。何が間違っているのかわかりません。 _$scope.cart_変数が変更されたことを確認しましたが、更新はトリガーされませんでした。

angularjswatch
36
harinsa

$watchは、最初の引数の文字列または関数パラメーターのみを評価します。 $watchを次のように変更します。

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

OR

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

参照API を参照してください

39
EpokK

ウォッチ式で変数を使用することはよくある間違いです。 $ scope.cartの場合は、代わりに文字列式「cart」を使用する必要があります。例えば、

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

AngularJsには、新しい監視メソッド$ watchCollectionがあります。これは、プロパティまたは配列項目の変更を監視するためにオブジェクトの等価オプションをtrueに設定した$ watchと基本的に同じです。

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

$ watchCollectionのAngularJsドキュメントへのリンクを次に示します。 http://docs.angularjs.org/api/ng/type/$rootScope.Scope 。構文は、基本的に$ watchと同じですが、3番目のパラメーターがありません（オブジェクトの等価性チェック）

26
Jin

変えようとする

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

に

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

$ watchは、最初の引数の文字列または関数パラメーターのみを評価します

0
Roger Jin