Question

此示例：https://jqueryui.com/sortable/

<ul id="sortable" ng-repeat="x in getTime(3)">
  <li class="ui-state-default">
   <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
   Item {{$index}} and order : ¿ {{order}} ?
  </li>
</ul>

生成：

<li> item 1 and order 1 </li>
<li> item 2 and order 2 </li>
<li> item 3 and order 3 </li>

但是，如果我首先更改第三个<li>，我会将第3项和第1项订单，我需要<li>所有

中的更新顺序

<li> item 3 and order 1 </li>
<li> item 1 and order 2 </li>
<li> item 2 and order 3 </li>

有什么建议吗？

Answer 1

您需要在ng-reapeat feild中按索引设置跟踪。如果您添加以下代码并重试。

<ul id="sortable" ng-repeat="x in listValue track by $index"">
  <li class="ui-state-default">
   <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
   Item {{$index}} and order : ¿ {{order}} ?
  </li>
</ul>

Answer 2

尝试使用Angular-UI Sortable和JQuery UI 在您的HTML中：

<ul class="list" ng-model="table1" ui-sortable="sortableOptions">
    <li class="item" ng-repeat="p in table1">{{ p.name }} and order {{p.order}}</li>
</ul>

在您的控制器中：

 $scope.table1 = [
    {
        id: 1,
        name: 'Item 1',
        order: 1
    },
    {
        id: 2,
        name: 'Item 2',
        order: 2
    },
    {
        id: 3,
        name: 'Data3',
        order: 3
    },
    {
        id: 4,
        name: 'Data4',
        order: 4
    },
    {
        id: 5,
        name: 'Data5',
        order: 5
    }
];
$scope.sortableOptions = {
    stop: function (e, ui) {
        for (var index in $scope.table1) {
            $scope.table1[index].order = Number(index) + 1;

        }


    }
};

您可以获得Sortable.js Here。这是一个Plunker我认为可以实现你想要的。希望这有帮助。祝你好运！

订购可拖动

2 个答案: