如何在 Angularjs 的动态 ng-repeat 中添加 jquery ui 可排序属性？答案

【问题标题】：How to add jquery ui sortable property in dymic ng-repeat of Angularjs?如何在 Angularjs 的动态 ng-repeat 中添加 jquery ui 可排序属性？
【发布时间】：2016-06-01 04:30:33
【问题描述】：

我有一些列表，我使用以下代码使列表可排序：

<div data-ng-repeat="groupNo in tempGroupList | filter:{groupNumber: selectedGroupNo}" data-ng-show="subGroupFound==false" >
                <ul data-ng-repeat="group in groupNo.groupMembers track by group.id"   id="sortable"  class="connectedSortable">
                    <li class="ui-state-default" id="{{group.id}}">
                        <div>
                            {{group.programName}}:{{group.year}}/{{group.semester}} ({{group.studentNumber}})
                        </div>
                        <div data-ng-show="group.showSubPortion">
                            <hr>
                            Split size: <input  data-ng-model="splitNumber" style="width:40px;color: black "  />
                            <button data-ng-click="splitAction(splitNumber)" style="color: black">Split</button><button data-ng-click="cancelSplitAction()" style="color: black">cancel</button>
                            <br>
                        </div>
                    </li>
                </ul>
            </div>

好吧，可排序功能有效。但是，在我的代码中，在第二个 div（子部分）中，有一个选项可以拆分列表中的学生人数。用户将右键单击列表并输入要拆分的数字。拆分后，我想更新列表，并想在顶部添加拆分列表。但是，我的问题是，列表在拆分时会更新。但是，当我在顶部添加拆分部分时，会显示该部分，但是不可排序。如何使拆分部分可排序。谢谢。

【问题讨论】：

你能提供一个jsfiddle吗？\
我只想使列表可排序，无论列表是否更新...ng-repeat 显示更新的列表，但是更新的项目不可排序。
你需要再次调用 sortable 来更新列表
你必须在指令定义中这样做。
那行不通。我尝试通过 $("sortable").sortable(); 调用 sortable但是，没有结果。

标签： jquery angularjs jquery-ui

【解决方案1】：

使用 Angular UI 团队开发的 ui-sortable 库。它基于可排序的 jquery UI，并被创建为与 AngularJS ngRepeat 创建的动态元素一起使用。

【讨论】：

【解决方案2】：

当你需要做一些 DOM 更改时，你必须在指令定义对象的链接函数中进行：

<div data-sortable-parent
     data-ng-repeat="groupNo in tempGroupList | filter:{groupNumber: selectedGroupNo}" 
     data-ng-show="subGroupFound==false" >

现在是 DDO （指令定义对象）：

theApp.directive('sortableParent', function(){
   return {
     restrict: 'A',
     link:function(scope, el, attrs){
         el.find('ul').sortable(); // <---apply sortable here.
     }
   };
});

【讨论】：