Question

在使用jquery sortable和angular ng repeat指令时，我遇到了意外的行为。我试图对表格中不同列内的项目进行排序。

当我将第2列的第1个元素拖到第1列的第1个位置（或第2个位置）时 - 一切正常，但是如果我尝试将第2列的第1个元素拖到第3个或者第四个位置它随后会消失。

如果您查看文档底部的json编码数组，您将看到组件已正确排序。

如果有任何帮助，我将不胜感激。

以下是实例：http://plnkr.co/edit/j6xMb4vhcUDVk8POjzpW?p=preview

HTML

<div data-ng-app="myApp" data-ng-controller="defaultCtrl">
    <table border="1" data-dnd-list="doc">
        <tr>
            <td data-ng-repeat="column in doc.columns" data-index="{{$index}}" class="column">
                <table class="item" style="border:1px solid red; cursor: pointer" width="100%" data-ng-repeat="component in column.components" data-index="{{$index}}">
                    <tr>
                        <td style="padding:5px">{{ component.content }}</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    {{ doc }}
</div>

JS

var app = angular.module("myApp", []);
    app.controller("defaultCtrl", ["$scope", function($scope) {
        $scope.doc = {
            columns: [
                {
                    components: [
                        {
                            content: "1 column 1 component"
                        },
                        {
                            content: "1 column 2 component"
                        },
                        {
                            content: "1 column 3 component"
                        }
                    ]
                },
                {
                    components: [
                        {
                            content: "2 column 1 component"
                        }
                    ]
                }
            ]
        }

    }]);

    app.directive('dndList', function() {
        return function(scope, element, attrs) {
            var toUpdate;
            var oldComponentIndex = -1;
            var oldColumnIndex = -1;

            scope.$watch(attrs.dndList, function(value) {
                toUpdate = value;
                console.log("New changes: ", toUpdate);
            },true);

            $(element[0]).sortable({
                items:'.item',
                start:function (event, ui) {
                    var i = $(ui.item);
                    // on start we define where the item is dragged from
                    oldComponentIndex = i.attr("data-index");
                    oldColumnIndex = i.closest(".column").attr("data-index");
                },
                stop:function (event, ui) {
                    var i = $(ui.item);

                    var newComponentIndex = i.index();
                    var newColumnIndex = i.closest(".column").attr("data-index");

                    var toMove = toUpdate.columns[oldColumnIndex].components[oldComponentIndex];
                    toUpdate.columns[oldColumnIndex].components.splice(oldComponentIndex, 1);
                    toUpdate.columns[newColumnIndex].components.splice(newComponentIndex, 0, toMove);

                    scope.$apply(scope.doc);
                }
            })
        }
    });

Answer 1

行。我找到了解决方案。事实是，当您将新项目放入可排序列表中时，DOM与AngularJS不同步。为防止这种情况，您需要删除新项目的HTML。

i.remove();

这是更新的plunker。 http://plnkr.co/edit/j6xMb4vhcUDVk8POjzpW?p=preview

AngularJs。 Ng重复jquery可排序的意外行为

1 个答案: