Question

在使用jQuery UI Sortable（多列）时，我想将作为json对象的已删除项目数据保存到现有数组中，因此我可以对视图进行实时更新。问题是当我将$('.selector').sortable('toArray')记录在＆lt; sortupdate＆＃39;它总是返回2个数组。我想拼接丢弃的项目数据，如$scope.items.splice(index, 1, newData)。由于sortable返回2个数组，我找不到数组中已删除项的正确索引。在HTML中我有这样的东西：

<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>

在控制器中：

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 Sortable指令的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 Sortable指令，或2.在包含ng-repeat的同一元素上调用'sortupdate'，而不是在其容器div上调用，以查看是否会导致ng-repeat $ index匹配生成的DOM元素的索引。

jQuery UI可以使用AngularJS多列进行排序

1 个答案: