3

リピーター内のオブジェクトのプロパティによって順序付けられたリピーターがあります。

<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今、私はjqueryuiでソート可能にしたいと思います
jQuery("#TodoList").sortable();

タスクの新しい並べ替え可能な位置に応じて、各タスクの更新の優先順位を設定するにはどうすればよいですか？

4

2 に答える 2

4

これが実際の例です。そこではいくつかの改善が可能です...しかしそれは機能します。 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();
   }
});
于 2013-01-31T22:06:57.913 に答える
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();
    });

}
于 2013-02-05T11:54:22.503 に答える