Question

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

$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/

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

1 个答案: