jQuery UI AngularJS 다중 열로 정렬 가능

Question

jQuery UI Sortable (여러 열)을 사용하는 동안 json 객체 인 삭제 된 항목 데이터를 기존 배열에 저장하려고하므로 뷰에 대한 실시간 업데이트를 가질 수 있습니다. 문제는 'sortupdate'내에 $('.selector').sortable('toArray')을 기록 할 때 항상 2 개의 배열을 반환하는 것입니다. 이 $scope.items.splice(index, 1, newData)과 같이 삭제 된 항목 데이터를 이어 붙이고 싶습니다. sortable은 2 개의 배열을 반환하기 때문에 배열에서 삭제 된 항목의 올바른 인덱스를 찾을 수 없습니다.

<div id="ticket-{{status | lowercase | removeWhiteSpace}}" class="col-xs-12 col-sm-6 col-md-4 col-lg-3" data-ng-repeat="status in ticketStatus"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title white-text-shadow ticket-{{status | lowercase | removeWhiteSpace}}">{{status}}</h4> 
      </div> 
      <div class="panel-body overview-thumb-container" id="ticket-panel-{{$index}}">  
       <div data-ng-class="getBorderClass(item.deadline)" class="panel panel-default overview-thumbnail ngRepeatAnimation" id="item-{{item.id}}" data-ng-repeat="item in items | filter: searchItem | filter: {status: status}:true | orderBy:'id':true"> 
        <div class="panel-heading"> 
         <h6 class="panel-title"> 
          <a data-ng-href="#/item/{{item.id}}" data-ng-click="viewItemDetail()" data-tooltip="{{item.title}}" data-tooltip-placement="bottom">{{item.title | limitTo: 30}}</a> 
         </h6> 
        </div> 
        <div class="panel-body">{{item.description | limitTo: 80}}</div> 
        <div class="panel-footer white-text-shadow"> 
         <div class="pull-left time" data-ng-class="getTextClass(item.deadline)">{{item.deadline | limitTo: 10}}</div> 
         <div class="pull-right text-right link"> 
          <ul class="list-inline"> 
           <li><a data-ng-href="#/item" data-ng-click='deleteItem(item.id)'><i class="fa fa-trash-o"></i></a></li> 
           <li><a data-ng-href="#/item/{{item.id}}" data-ng-click="viewIssueDetail()">Details</a></li> 
          </ul> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

컨트롤러에서 : HTML에서 나는 이런 식으로 뭔가를

app.controller('TicketCrtrl', function($scope, $http, $timeout, TicketService) { 
    // this service is defined 
    TicketService.getData().then(function(tickets) { 
     $scope.items = tickets; 
     dnd(); 
    }); 

    function dnd() { 
     var container = angular.element('.overview-thumb-container'); 
     container.sortable({ 
      placeholder: "ui-state-highlight", 
      opacity: 0.6, 
      cursor: 'move', 
      connectWith: '.overview-thumb-container' 
     }); 

     var from, to, 
      id = -1, 
      index = -1, 
      currentData = new Object(); 
     container.on('sortstart', function(e, ui) { 
      from = $(e.target).parent().find('h4').text(); 

      var cid = $(ui.item).attr('id'); // current dragged item id 
      id = parseInt(cid.substr(cid.lastIndexOf('-') + 1)); 
      angular.forEach($scope.items, function(item, key) { 
       if (item.id === id) { 
        index = key; 
        angular.extend(currentData, item); 
        return; 
       } 
      }); 
     }); 

     container.on('sortstop', function(e, ui) { 
      to = ui.item.parent().parent().find('h4').text(); 
      // dropped in a different column 
      if (from !== to) { 
       // remove the status attribute from current object 
       delete currentData.status; 
       // extend the new status to this data 
       angular.extend(currentData, {'status': to}); 
      } else 
       return; // dropped in the same column 
     }); 

     container.on('sortupdate', function(e, ui) { 
      console.log($(this).sortable('toArray')); // it returns 2 arrays with item ids 
      // update this data 
      $http.put(root.path + '/' + id, currentData).success(function() { 
       ui.item.animate({backgroundColor: '#f5fff5', borderColor: '#239169'}, 300).animate({backgroundColor: '', borderColor: '#ddd'}, 200); 
       $timeout(function() { 
        // replace the old data with the new one 
        $scope.items.splice(index, 1, currentData); // this doesn't work as the indexs are changed. It causes duplicates in ng-repeat 
       }, 500); 
      }).error(function(data, status) { 
       root.showHideWarningInfo($scope.errorConnectServer + status); 
       // put item back to its original position 
       container.sortable('cancel'); 
      }); 
     }); 
    }; 
} 

배열은 다음과 같습니다;

[{"description":"test 01","title":"test 01","deadline":"05/19/2014 00:00","status":"normal","id":1},{"description":"test 02","title":"test 02","deadline":"05/19/2014 00:00","status":"high","id":2},{"description":"test 03","title":"test 03","deadline":"05/20/2014 00:00","status":"low","id":3}] 

내가 배열에서 삭제 된 항목의 오른쪽 인덱스를 찾을 수있는 방법을 누군가의 도움을 수있는, 그래서보기를 업데이트 할 수 있습니다. 미리 감사드립니다.

Answer 1

AngularUI 정렬 가능한 지시어의 Github에서 페이지의 '개발 노트'헤더 아래에있는이 제안 :

ui-sortable element should only contain one ng-repeat and not any other elements (above or below). 
Otherwise the index matching of the generated DOM elements and the ng-model's items will break. 
In other words: The items of ng-model must match the indexes of the generated DOM elements. 

당신은 1. AngularUI 정렬 가능한 지시어를 사용할 수도 있고, 또는 2 호 'sortupdate' ng-repeat $ 인덱스가 생성 된 DOM 요소의 인덱스와 일치하는지 확인하려면 해당 컨테이너 div가 아니라 ng-repeat를 포함하는 동일한 요소에