Angular-UI ui-sortable looses sync with bounded array

Question

First of all let me tell you that I'm a beginner on html/js developing.

Using angular-ui to permit sorting a list (ul), when performing SOME actions the array looses synchronization with the list.

Starting with :

$scope.list = ["one", "two", "three", "four"];

and the html:

<ul ui:sortable ng:model="list">
        <li ng:repeat="item in list" class="item">{{item}}</li>
</ul>

When I drag (example) the first li element between second and third it changes place inside ul, yet the bounded item remains in same position in list array.

>angular.element($(".ng-scope")).scope().list
["one", "two", "three", "four"];

I've created an jsfiddle and that behaviour can be tested : http://jsfiddle.net/DmLt2/

Other strange behaviors can be observed if we play a little bit with it.

JQuery 1.9.1, JQueryUI 1.10.3, Angular 1.2.2, AngularUI 0.4.0

Meanwhile, I've found online an jQuery UI Sortable plugin wrapper. With minor changes I've managed to put it working here : http://jsfiddle.net/42VCK/

Yet its required to remove the reference to AngularUI or change the module name.

Can anyone give me some help to put this working ?

Beyers · Accepted Answer · 2013-12-13 22:42:33Z

1

Not sure what angular-ui you are using, but it is way old. The latest ui-sortable is hosted at https://github.com/angular-ui/ui-sortable . Important note, to use with AngularJS 1.2.x you need to use the ui-sortable branch angular1.2 as per their readme file: https://github.com/angular-ui/ui-sortable/tree/angular1.2

Using the above sources the following jsfiddle is based on your example except using the right ui-sortable sources: http://jsfiddle.net/BuLdk/1/

answered Dec 13, 2013 at 22:42

Beyers

9,11847 silver badges59 bronze badges

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

1 Comment

João Rodrigues Over a year ago

Thank you Beyers. I was using an angular-ui package that was out of date (or never had updated) . Honestly I still have some difficulty in dealing with a myriad of versions, alternative versions, versions that require specific versions of others. For me it's a mess.

Collectives™ on Stack Overflow

Angular-UI ui-sortable looses sync with bounded array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related