Angular 可排序 orderby 对象属性答案

【问题标题】：Angular sortable orderby object propertyAngular 可排序 orderby 对象属性
【发布时间】：2013-01-11 01:51:52
【问题描述】：

我有一个中继器，它按中继器中对象的属性排序。

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

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

【问题讨论】：

您到底想达到什么，请用简单的词简单地概括一下，例如如果可能的话！！
当用户将task2拖到task1上（改变他们的排序顺序）我希望task 2的优先级变为1，task1的优先级变为2
您的数据由 Angular 中的 JavaScript 模型管理，但由 jQuery 中的 DOM 管理。如果你混合两种不同类型的数据模型，我不希望它们能很好地发挥作用。你可以完成这项工作，但它会很麻烦。
是的。如果你能告诉我如何正确表达，我将不胜感激
看看是否可以使用 ui-sortable 的回调函数来更新你的模型。见stackoverflow.com/questions/13500590/…

标签： jquery-ui angularjs jquery-ui-sortable

【解决方案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();
   }
});

【讨论】：

这正是我希望我不必做的事情，但我想就是这样。现在谢谢。我会再等几天，希望有人说一些关于隐藏的 angular-ui 功能，然后会接受你的回答。
没有隐藏的功能可以实现这一点，但在包含必要 jQuery 行为的指令的链接函数中正确使用 scope.$apply。

【解决方案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();
    });

}

【讨论】：

不太适合我 jsfiddle.net/S7nSt 。优先级属性没有得到更新。也许是因为这段代码中绝对没有更新逻辑。
啊，对，似乎像 pravelgi 的答案一样从“更新”绑定可以做到这一点。呵呵。