我想在UI
上渲染大量的记录8000
我的HTML代码是
<ul id="ul{{group.Id}}">
<li data-ng-repeat="vehicle in group.Vehicles | filter:VehRegNo">
<input type="checkbox" id="checkbox1" data-ng-disabled="IsAllLoading" data-ng-model="vehicle.IsChecked" data-ng-change="changeCheck(vehicle)">
</li>
</ul>
在控制器端
group.Vehicles = getDataGradually(items, 0, 50, function() {
$scope.$digest();
}, function() {
$scope.IsAllLoading = false;
$("#cb" + id).toggle();
$("#lbl" + id).toggle();
});
//if i put all items dirctly to vehicles then ui freez
function getDataGradually(data, gap, count, updateCb, finishCb) {
var ret = [];
var handled = 0;
function doInsert() {
var start = handled;
var end;
if (handled + count > data.length) {
end = data.length;
} else {
end = handled + count;
}
for (let i = start; i < end; i++) {
ret[i] = data[i];
}
handled += count;
if (handled < data.length) {
$timeout(function() {
doInsert();
updateCb && updateCb();
}, gap);
} else {
return finishCb && finishCb();
}
}
doInsert();
return ret;
}
问题是需要花费大量时间;有时2到3分钟渲染所有项目。是否有任何建议分页不是客户端的选项也有一些搜索过滤器。