Angular sortable 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},
]

现在我想使用jquery ui来对#TodoList进行排序 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/

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

你是AngularJS代码

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();
    });

}