Verileri güncellemek için $ watch kullanma, ng-repeat değişiklikleri yansıtmıyor

Question

$scope.raw içinde fooditems listesi var ve bu verileri sütunlarda göstermek istiyorum, böylece yapıyı biraz değiştiriyorum. Bunu sortStuff() işlevinde yapıyorum ve güncel verileri $scope.allfood'da saklıyorum.

$scope.$watch('raw', function(){ 
    $scope.allfood = $scope.sortStuff(); 
    console.log($scope.allfood); 
}, true); 

Bu yemek etrafında sürüklenen ne olacağını ise: $scope.raw yılında sortStuff() her zaman şey değişiklikleri çağıran bir $ izle (gıda kategorisini değiştirmek için sürükle ve bırak kullanıyorum) Orada

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 
} 

Temel olarak, $scope.raw'un içinde doğru nesneyi arayın ve cat ürününü yiyecek için yeni bir kategori olarak değiştirin. Ayrıca dom öğesini siliyorum, çünkü görünümü yenilemek için ng-yinelemeye güveniyorum. Bu iyi çalışıyor gibi görünüyor: $ watch içinde const.log, nesnenin doğru kategoriye taşındığını ve verilerin neye benzemesi gerektiğini gösteriyor. Ancak, görsel olarak ng tekrarı verileri yansıtmaz.

Here's the jsfiddle.

Bir öğeyi B'den C'ye sürüklemek iyi çalışıyor. Biri A'dan B'ye sürüklemek, B'den iki maddeyi ortadan kaldırır ... sonuçlar çok tutarsızdır ve ne olduğu hakkında hiçbir fikrim yok.

Herhangi bir fikir yanlış giden nedir? Ya da bunu yapmak için daha iyi bir yol için herhangi bir öneri?

Answer 1

Kodunuzdaki sorun, ng-repeat yönergesinin listedeki her öğeye $$hashKey özelliğini eklemesidir. Bu özellik, DOM öğelerini dizi öğeleriyle ilişkilendirmek için yönergeyle kullanılır.

Öğeleri referans olarak geçirdiğinizden, ng-repeat yönergesi, $$hashKey özelliğine doğrudan $scope.raw dizinizin nesnelerine yazılır. Basit bir çözüm, nesneleri $scope.allfood nesnesine yerleştirmeden önce kopyalamaktır. $scope.raw ait nesneler bakir kalırken

_.each($scope.raw, function(recp){ 
    recp = _.clone(recp); 
    switch(recp.cat){ 
     ... 
    } 
}); 

Şimdi ng-repeat, $scope.allfood nesneleri günceller.

güncellenmiş keman bakınız:

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