Question

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

<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（subPortion）中，有一个选项可以分割列表中的学生数量。用户将右键单击列表并输入要拆分的数字。拆分后，我想更新列表，并希望在顶部添加拆分列表。但是，我的问题是，当一个人被拆分时，列表会更新。但是，当我在顶部添加分割部分时，显示部分，但是，不可排序。如何使分割部分可排序。谢谢。

Answer 1

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

Answer 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.
     }
   };
});

如何在Angularjs的dymic ng-repeat中添加jquery ui可排序属性？

2 个答案: