0

ネストされた JQuery ソート可能オブジェクトを使用する場合、DOM とモデルの同期をどのように維持しますか? 次のように定義されたコントローラーがあるとします。

function testCtrl($scope) {
    $scope.data = [{'name' : 'Test 1',
                   'index' : 0,
                   'values': [{'name' : 'sub test 1-1', 'index' : 0}, {'name' : 'sub test 1-2', 'index' : 1}]},
                   {'name' : 'Test 2',
                   'index' : 1,
                   'values': [{'name' : 'sub test 2-1', 'index' : 0}, {'name' : 'sub test 2-2', 'index' : 1}]}
   ];

   $scope.orderProp = 'index';
}

次のテンプレートを使用して、JQuery sortables で第 1 レベルのデータと第 2 レベルのデータを表示します。

<ul ng-sortable='data'>
    <li ng-repeat="d in data | orderBy:orderProp">
        <p>{{d.name}}</p>
        <ul ng-Sub-Sortable="d.values">
            <li ng-repeat="sub in d.values">{{sub.eg}}</li> 
        </ul>
    </li>
</ul>

そして、ディレクティブを使用して、動作が異なる 2 つの異なる種類の並べ替え可能なリストを指定します (簡潔にするために以下から削除されています)。

app.directive("ngSortable", function(){
    return {
        link: function(scope, element, attrs){                  
            element.sortable();
        }
    };
}

app.directive("ngSubSortable", function(){
    return {
        link: function(scope, element, attrs){                  
            element.sortable();
        }
    };
}

ユーザーがリストをソートするとき、モデルを更新してインデックスが正しいことを確認し、将来的にリストが正しく出力されるようにするにはどうすればよいですか?

4

2 に答える 2

1

ngModel を使用してデータを dom と同期することをお勧めします

これを試すことができます: https://github.com/JimLiu/Angular-NestedSortable

于 2013-11-03T03:33:06.727 に答える
0

ネストされたソート可能オブジェクト内の位置依存データを持つアイテムのモデルを DOM と同期させるために私が見つけた最良の方法は、次のように各要素に現在の位置を属性として追加することです。

<ul ng-sortable='data'>
    <li ng-sortable-index="{{$index}}" ng-repeat="d in data | orderBy:orderProp">
        <p>{{d.name}}</p>
        <ul ng-Sub-Sortable="d.values">
            <li ng-sortable-index="{{$index}}" ng-repeat="sub in d.values">{{sub.eg}}</li> 
        </ul>
    </li>

次に、jQuery sortable が初期化されるディレクティブで、sortable update メソッドを次のように指定する必要があります。

element.sortable({
    update: function(event, ui) {
        var model = scope.$eval(attrs.ngSubSortable);

        // loop through items in new order
        element.children().each(function(index) {
            // get old item index
            var oldIndex = parseInt($(this).attr("ng-sortable-index"), 10);
            model[oldIndex].index = index;
         });

         scope.$apply();
     }
});
于 2012-08-21T21:59:57.677 に答える