ng重复中的角度js性能问题

时间:2017-03-30 14:38:48

标签: javascript angularjs

我想在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分钟渲染所有项目。是否有任何建议分页不是客户端的选项也有一些搜索过滤器。

0 个答案:

没有答案