Angularjsのdymic ng-repeatにjquery ui sortableプロパティを追加するには？

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> 

まあ、ソート可能な機能が動作します。しかし、私のコードでは、2番目のdiv（subportion）には、リストにある学生の数を分割するオプションがあります。ユーザーはリストを右クリックし、分割する番号を入力します。分割後、私はリストを更新したい、そして分割されたリストを最上部に追加したい。しかし、私の問題は、リストが分割されたときにリストが更新されることです。しかし、上部に分割された部分を追加すると、その部分が表示されますが、ソート可能ではありません。どのように分割部分をソート可能にすることができますか。ありがとう。

Answer 1

あなたは、いくつかの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. 
    } 
    }; 
}); 

Answer 2

Angular UIチームが開発したui-sortableライブラリを使用してください。これは、jquery UIソート可能に基づいており、AngularJS ngRepeatによって作成された動的要素で動作するように作成されています。