$ watchを使用してデータを更新すると、変更が反映されないng-repeat

Question

食品のリストが$scope.rawにあります。このデータを列に表示したいので、構造を少し変更しています。私はこれをsortStuff()関数で行い、更新されたデータを$scope.allfoodに格納します。

$scope.$watch('raw', function(){ 
    $scope.allfood = $scope.sortStuff(); 
    console.log($scope.allfood); 
}, true); 

これは食べ物が周りにドラッグされたときに何が起こるかです：：$scope.rawでsortStuff()たびに何の変更を呼び出す$の時計は、（私は食品のカテゴリを変更するには、ドラッグ＆ドロップを使用しています）があります

receive:function(event, ui) { 
    var issueScope = angular.element(ui.item).scope(); 
    scope.$apply(function() { 
     var recp = _.find(scope.raw, function(lineitem){ 
      return lineitem.name === issueScope.receipe.name; 
     }) 
     recp.cat = scope.col.name; 
    }) 

    $(ui.item).remove(); // remove DOM 
} 

基本的には、$scope.rawの中の正しいオブジェクトを検索し、catを食品の新しいカテゴリに変更します。また、ng-repeatを数えてビューを更新するので、dom要素も削除します。これはうまくいくようです：$ watchの中のconsole.logは、オブジェクトが正しいカテゴリに移動されていることを示し、データはそのように見えます。しかし、視覚的には、ng-repeatはデータを反映しません。

Here's the jsfiddle。

BからCへの項目のドラッグは問題ありません。 AからBにドラッグすると、Bからの2つの項目が消えます。結果は非常に矛盾しており、何が起きているのか分かりません。

何が問題になりますか？これを行うためのよりよい方法のための、あるいは何か提案がありますか？

Answer 1

コードの問題点は、ng-repeatディレクティブが、リスト内のすべての要素にプロパティ$$hashKeyを追加することです。このプロパティは、DOM要素を配列要素に関連付けるためにディレクティブによって使用されます。

ng-repeatディレクティブは、要素を$scope.raw配列のオブジェクトに直接入力します（$$hashKey）。簡単な回避策は、オブジェクトを$scope.allfoodオブジェクトに挿入する前にコピーすることです。 $scope.rawのオブジェクトは手つかずのまま

_.each($scope.raw, function(recp){ 
    recp = _.clone(recp); 
    switch(recp.cat){ 
     ... 
    } 
}); 

今ng-repeatは、$scope.allfoodのオブジェクトを更新します。

が更新フィドルを参照してください：

http://jsfiddle.net/b8Fa7/5/