javascript - 使用 $watch 更新数据，ng-repeat 不反射(reflect)变化

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 刷新 View 。这似乎工作正常: $watch 内的 console.log 显示对象正在被移动到正确的类别并且数据看起来像它应该的样子。然而，从视觉上看，ng-repeat 并不反射(reflect)数据。

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 的对象保持不变。

查看更新后的 fiddle :

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