Javascript AngularJS:使用嵌套JQuery排序表时保持Dom和模型同步
在使用嵌套JQuery排序表时,如何保持DOM和模型的同步?假设我有一个控制器,其定义如下:Javascript AngularJS:使用嵌套JQuery排序表时保持Dom和模型同步,javascript,angularjs,Javascript,Angularjs,在使用嵌套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'
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>
现在,当用户对列表进行排序时,如何更新模型以确保索引正确,从而在将来正确输出列表?对于嵌套排序表中具有位置相关数据的项目,我发现保持模型与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>
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();
}
});
您最好使用ngModel将数据与dom同步 你可以试试这个: 您调查过吗?
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();
}
});