AngularJS：オブジェクトの配列への変更に対して$ watchがトリガーされていない

Question

私はテーブルを持っており、ユーザはこれらのカラムの特定のカラムと特定の値に基づいてテーブルのローをフィルタリングすることができます。このフィルタを追跡するオブジェクト構造は次のようになります。

$scope.activeFilterAttributes = [ 
    { 
     "columnName": "city", 
     "values": ["LA", "OT", "NY"] 
    }, 
    { 
     "columnName": "weather", 
     "values": ["humid", "sunny"] 
    } 
]; 

したがって、配列のオブジェクトには "columnName"と "values"キーが含まれています。 "columnName"はフィルタの対象となる列を示し、 "values"はフィルタの値を示します。基本的には、上記の配列は、都市列に値として「LA」、「OT」または「NY」が含まれ、天気列に値として「湿気」または「日当たり」が含まれている表の行が表示されます。これらの値を含まない他の行は表示されません。

$scope.activeFilterAttributes = [ 
    { 
     "columnName": "city", 
     "values": ["LA", "NY"] 
    }, 
    { 
     "columnName": "weather", 
     "values": [] 
    } 
]; 

：ユーザーが「都市」の欄に「LA」や「NY」を持つ行のみを見たい場合は、結果の配列は次のようになりますが、より良い、このオブジェクトを理解するために

ユーザはこれらのフィルタを設定または削除します。これが起こるたびに、上記の配列が更新されます。 このアップデートは正しく行われ、私はそれを確認しました。問題はありません。

問題は$ watch（）にあります。

$scope.$watch('activeFilterAttributes', function() { 
    //Code that should update the rows displayed in the table based on the filter 
}} 

$scope.activeFilterAttributesながらのように適切に更新され、ユーザーがUIでフィルタを更新したときにこれが更新されたとき、$ウォッチがトリガされていない：私は、次のコードを持っています。アプリケーションがロードされたが、将来の更新がこれに何の影響も与えないときに初めてトリガされます。

私はこれを実証するフィドル作成しました：フィドルでhttp://jsfiddle.net/nCHQV/

を、$scope.infoはいわば、テーブルの行を表し、
$scope.dataはフィルタを表します。
ボタンをクリックするのは、フィルタを更新する（データの場合は - データ）ので、テーブルに表示されている行を更新する（フィーリング - 情報の場合）と同じです。しかし、見ることができるように、情報はボタンをクリックすると更新されません。

オブジェクトの配列が変更されたときに$scope.$watchをトリガーする必要はありませんか？

Answer 1

$watchメソッドは、同じ参照を共有するのではなく、2つのオブジェクトが等しいことをチェックする任意の第3のパラメータobjectEqualityを取ります。参照チェックよりも高価な操作なので、これはデフォルトの動作ではありません。あなたの時計はまだ同じオブジェクトを参照しているため、トリガーされていません。

詳細はdocsを参照してください。

$scope.$watch('activeFilterAttributes', function() { 
    // ... 
}, true); // <-- objectEquality 

このパラメータを追加すると、すべて正常です。

Answer 2

AngularJS 1.1.4のように、$WatchCollection関数が配列と他のコレクションで使用するために追加されました。深度等価フラグがtrueに設定された$Watchよりはるかに安いです。

このように、この新しい機能は、ほとんどの状況で望ましいものになりました。私はあなたが問題の原因と解決への素晴らしい説明を提供した回数を思い出すことができない - $watch機能