我在$scope.raw中有一个fooditems列表,我想在列中显示这些数据,所以我稍微改变了结构.我在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不反映数据.
将项目从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的对象保持不变.
看到更新的小提琴：
