jquery-ui - Angular 可排序 orderby 对象属性

Question

我有一个由转发器中对象的属性排序的转发器。

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

范围如下所示：

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

现在我想#TodoList用 jquery ui 进行排序
jQuery("#TodoList").sortable();

如何根据任务新的可排序位置更新每个任务的优先级？

Answer 1

这是一个工作示例。那里可以改进一些事情......但它确实有效。 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();
   }
});

Answer 2

jsFiddle: http://jsfiddle.net/AdrianMigraso/BTDdm/

your HTML

<div id='#TodoList' ng-controller="MyCtrl">
    <ul id="sortable">
        <li class="ui-state-default" ng-repeat="todo in todos | filter:left | orderBy:'priority'">
            <span class="ui-icon ui-icon-arrowthick-2-n-s" ></span>
            {{ todo.text }}
        </li>
    </ul>
</div>

you AngularJS code

function MyCtrl($scope) {
    $scope.todos = [
        {text: 'do 1', priority: 1},
        {text: 'do 2', priority: 2},
        {text: 'do 5', priority: 5},
        {text: 'do 3', priority: 3},
        {text: 'do 4', priority: 4},
    ];
    $scope.$watch('todos', function(newVal,oldVal) {
        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();
    });

}