ネストされた 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();
}
};
}
ユーザーがリストをソートするとき、モデルを更新してインデックスが正しいことを確認し、将来的にリストが正しく出力されるようにするにはどうすればよいですか?