Question

I have a repeater ordered by a property of the objects in the repeater.

<div id='#TodoList' >
    <div ng-repeat="todo in todos | filter:left | orderBy:'priority'">
        {{ todo.text }}
    </div>
</div>

The scope looks like this:

$scope.todos = [
    {text: 'do 1', priority: 1},
    {text: 'do 2', priority: 2},
]

Now I want to make the #TodoList sortable with jquery ui
jQuery("#TodoList").sortable();

How do I make the priority of each task update according to the new sortable position of the task?

Answer 1

Here’s a working example. A few things can be improved there… but it works.
http://jsfiddle.net/QfERt/30/

$("#TodoList").sortable({
   update: function( event, ui ) {
     var uiArray = $("#TodoList").sortable('toArray');
     for (var i = 0; i < $scope.todos.length; i++) {
       $scope.todos[i].priority = uiArray.indexOf($scope.todos[i].text) + 1;
     }
     $scope.$apply();
   }
});