How to add jquery ui sortable property in dymic ng-repeat of Angularjs?

Question

I have some list, and I make the list sortable with the following code:

<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>

Well, the sortable functionality works. But, in my code, in the second div (subPortion), there is an option to split the number of students the list have. The user will right click on the list and enter a number to split. After the split, I want to update the list, and want to add the splitted list at the top. But, my problem is, the list is updated when one is splitted. But, when I add the splitted portion at the top, the portion is shown, but, is not sortable.How can I make the splitted portion sortable. Thanks.

I just want to make the list sortable, whever the list is updated...ng-repeat shows the updated list, but, the updated items are not sortable. — Monjur Morshed
– Monjur Morshed, Commented Jun 1, 2016 at 4:48
That doesn't work. I tried calling the sortable by $("sortable").sortable(); but, no result. — Monjur Morshed
– Monjur Morshed, Commented Jun 1, 2016 at 5:08

T J · Accepted Answer · 2016-06-01 05:50:40Z

1

Use the ui-sortable library developed by Angular UI team. It is based on jquery UI sortable and is created to work with dynamic elements created by AngularJS ngRepeat.

answered Jun 1, 2016 at 5:50

T J

43.2k13 gold badges87 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jai · Accepted Answer · 2016-06-01 05:01:18Z

0

Whenever you need to do some DOM changes then you have to do that in the directive definition object's link function:

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

Now the DDO (Directive Definition Object):

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

answered Jun 1, 2016 at 5:01

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Collectives™ on Stack Overflow

How to add jquery ui sortable property in dymic ng-repeat of Angularjs?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related