如何在angularJS中渲染大量数据集

How to render a big number of datasets in angularJS?

本文关键字：数据集 angularJS      更新时间：2023-09-26

我有一个AngularJS Singplepageapp。现在我想显示大量的数据集（它应该可以很好地处理50.000个数据集）：

<ul>
    <li ng-repeat="node in data">
        <a ng-if="node.children == false" class="lastitem" ng-click="set(node.nodeID)" ng-class="{active: node.nodeID == selectedID}">
            <span>{{node.Name}}</span>
        </a>
    </li>
</ul>

即使是这个简单的模板（稍后应该会更复杂），浏览器（Firefox）也需要大约45秒的渲染时间。浏览器也会在该时间跨度内冻结。

有没有什么方法可以在不花很长时间的情况下显示这么大量的数据？

非常感谢！

您可以部分加载数据，比如1000，当用户滚动到1000以上时，可以再获取1000，并将它们附加到视图中。

使用类似的东西

.directive("loadMoreData", [function() {
    return {
        restrict: 'ACE',
        link: function($scope, element, attrs, ctrl) {
            var raw = element[0];
            element.scroll(function() {
                if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight){
                    $scope.$apply("loadMoreData()");
                }
            });
        }
    };

}])

源

相关文章：