我有一个巨大的数据集,其中包含数千行,每个行具有大约10个字段,大约2MB的数据。我需要在浏览器中显示它。最简单的方法(获取数据,将其放入$scope,ng- repeat=""执行其工作)可以很好地工作,但是当它开始将节点插入DOM时,它会使浏览器冻结大约半分钟。我应该如何解决这个问题?
$scope
ng- repeat=""
一种选择是将行逐行追加,$scope并等待ngRepeat完成向DOM中插入一个块后再移至下一个。但是AFAIK ngRepeat在完成“重复”操作时不会返回报告,因此会很丑陋。
ngRepeat
另一种选择是将服务器上的数据拆分为页面,然后在多个请求中获取它们,但这更加丑陋。
我浏览了Angular文档以查找类似的内容ng-repeat="data in dataset" ng-repeat- steps="500",但没有找到任何东西。我对Angular的方法还很陌生,所以有可能我完全没有注意这一点。最佳做法是什么?
ng-repeat="data in dataset" ng-repeat- steps="500"
我同意@ AndreM96的观点,最好的方法是只显示有限数量的行,更快更好的UX,这可以通过分页或无限滚动来完成。
使用limitTo过滤器,使用Angular进行无限滚动非常简单。您只需要设置初始限制,当用户要求提供更多数据时(为简便起见,我使用按钮)就可以增加限制。
<table> <tr ng-repeat="d in data | limitTo:totalDisplayed"><td>{{d}}</td></tr> </table> <button class="btn" ng-click="loadMore()">Load more</button> //the controller $scope.totalDisplayed = 20; $scope.loadMore = function () { $scope.totalDisplayed += 20; }; $scope.data = data;
这是一个JsBin。
这种方法对于手机可能是个问题,因为通常在滚动大量数据时它们会滞后,因此在这种情况下,我认为分页更为合适。
为此,您将需要limitTo过滤器和自定义过滤器来定义所显示数据的起点。
这是带有分页的JSBin。