使用$watch更新数据，ng重复不反映更改

Using $watch to update data, ng-repeat not reflecting changes

本文关键字：ng watch 更新 数据 使用      更新时间：2024-04-20

我在$scope.raw中有一个食物项目列表，我想在列中显示这些数据，所以我要稍微改变一下结构。我在sortStuff()函数中执行此操作，并将更新后的数据存储在$scope.allfood中。有一个$watch，每当$scope.raw中发生任何变化时都会调用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重复并不能反映数据。

这是小提琴。

将项目从B拖动到C很好。从A拖动一个到B，会使B中的两个项目消失。。。结果非常不一致，我不知道发生了什么。

有什么问题吗？或者有什么更好的方法建议吗？

代码的问题在于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/

相关文章：