AngularJS :在使用嵌套JQuery可排序时保持Dom和模型同步
AngularJS :在使用嵌套JQuery可排序时保持Dom和模型同步
提问于 2012-08-17 07:37:16
在使用嵌套的JQuery可排序时，如何使DOM和模型保持同步？假设我有一个Controller，它的定义如下：
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可排序中显示第一级数据和第二级数据：
<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>我使用指令来指定两种不同类型的可排序列表，因为它们在行为上确实不同(为简洁起见，从下面删除)：
app.directive("ngSortable", function(){
return {
link: function(scope, element, attrs){
element.sortable();
}
};
}
app.directive("ngSubSortable", function(){
return {
link: function(scope, element, attrs){
element.sortable();
}
};
}现在，当用户对列表进行排序时，我如何更新模型以确保索引正确，从而在将来正确输出列表？
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-08-22 05:59:58
我找到的保持模型与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可排序的指令中，应按如下方式指定可排序的更新方法：
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();
}
});Stack Overflow用户
发布于 2013-11-03 11:33:07
最好使用ngModel与dom进行数据同步。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11996941
复制相关文章
相似问题
腾讯云开发者
