使用 $watch 更新数据，ng-repeat 不反映更改

Question

我在$scope.raw 中有一个食品列表，我想在列中显示这些数据，所以我稍微改变了结构。我在sortStuff() 函数中执行此操作，并将更新的数据存储在$scope.allfood 中。每次$scope.raw 发生任何变化时，都会有一个 $watch 调用sortStuff()（我正在使用拖放来更改食物类别）：

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

当食物被拖来拖去时会发生这种情况：

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 更改为食物的新类别。我还删除了 dom 元素，因为我指望 ng-repeat 来刷新视图。这似乎工作正常：$watch 中的 console.log 显示对象正在移动到正确的类别，并且数据看起来应该是什么样子。然而，从视觉上看，ng-repeat 并没有反映数据。

Here's the jsfiddle.

将项目从 B 拖动到 C 可以正常工作。将一个从 A 拖到 B，使 B 中的两个项目消失...结果非常不一致，我不知道发生了什么。

有什么想法吗？或者有什么更好的方法来做到这一点的建议？

Answer 1

您的代码的问题是ng-repeat 指令将$$hashKey 属性添加到列表中的每个元素。指令使用此属性将 DOM 元素与数组元素相关联。

因为您通过引用传递元素，所以ng-repeat 指令将$$hashKey 属性直接写入$scope.raw 数组的对象中。一个简单的解决方法是在将对象插入$scope.allfood 对象之前复制这些对象。

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

现在ng-repeat 更新$scope.allfood 的对象，而$scope.raw 的对象保持不变。

查看更新的小提琴：

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