使用$ watch更新数据，ng-repeat没有反映变化

我有一个$scope.raw的食品列表，我想在列中显示这些数据，所以我正在改变结构。我在sortStuff()函数中执行此操作，并将更新的数据存储在$scope.allfood中。有一个$手表调用$scope.rawsortStuff()每次有什么变化（我使用拖放来改变食品类）：

$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中的两个项目消失......结果非常不一致，我不知道发生了什么。

任何想法出了什么问题？或者，也许有更好的方法来做到这一点的任何建议？

来源

2013-12-08 networkprofile

您应该使用$ watchCollection（ '原始'，函数（）{}）;但我已经做到了，并且在我的应用程序中仍然看到相同的问题... – philwills

您的代码存在的问题是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/

来源

2013-12-08 07:07:27 frececroka

谢谢，这很有用！两个问题虽然：是否可以克隆一个没有属性的对象，比如通过角度添加的$$ $$ hashKey？另外，你认为有更好的方法来做到这一点？角度在每次更改时重新生成整个'$ scope.allfood'的事实对于性能来说都不是很好，我想避免它。 – networkprofile

'angular.copy'提供了一种创建数组或对象的深层副本的方法，不需要像'$$ hashKey'这样的属性：http://docs.angularjs.org/api/angular.copy – frececroka

您可以保持跟踪对'$ scope.raw'数组所做的所有更改，并且只根据跟踪的更改修改'$ scope.allfood'对象。只要名单很小，我不认为这会带来显着的业绩提升。 – frececroka

使用$ watch更新数据，ng-repeat没有反映变化

回答

相关问题