如何在angularjs中提高ng-repeat的大数据列表多重过滤器的速度

how to improve speed of multiple filter on ng-repeat with a large data list in angularjs

本文关键字：数据 列表 速度 过滤器 ng-repeat angularjs      更新时间：2023-09-26

我有一个大数据列表(超过200行)。并且每行有7,8列，所有这些都来自REST API(它花了5,6秒)。

在Angularjs控制器中:

 $http.get(path).then(function (resp) {
    $scope.listOfData= resp.data;
});

在Html页面:

<table>
                <tr class="header">
                    <th>id</th>
                    <th>Name</th>
                    <th>status</th>
                    <th>mobile</th>
                    <th>Gender</th>
                    <th>location</th>
                 </tr>
                 <tr ng-repeat="data in listOfData |orderBy: id | filter:folder | filter:status.value | filter:xyz | filter:abc">
                    <th>{{data.id}}</th>
                    <th>{{data.name}}</th>
                    <th>{{data.status}}</th>
                    <th>{{data.mobile}}</th>
                    <th>{{data.gender}}</th>
                    <th>{{data.location}}</th>
                 </tr>
     </table>

对于ng-repeat，我使用了多个过滤器(所有过滤器都来自select标签)。

所有这些代码都运行良好。但是当我通过ng-repeat迭代数据列表时，需要15-20秒才能加载完整的数据。

我的第一个问题是，如何减少ng-repeat的加载时间?

第二个问题是，当我过滤数据工作良好，但它需要一些时间来过滤(一些时间，屏幕挂起3,4秒)。

所以你能告诉我我在哪里做错了，以及如何修复它，所以我的页面会加载更快，多个过滤器将更容易和更快地执行?

Thank you so much

您可以做以下几件事来提高性能:

  1. 限制显示的项目数量。将其限制为显示的项目数量较少(50)。如果你需要显示更多的项目，在底部添加一个显示更多的按钮，这会增加限制。

    <table> ... <tr ng-repeat="data in listOfData |orderBy: id | filter:folder | filter:status.value | filter:xyz | filter:abc | limitTo: maxLimit"> ... </tr> </table> <a ng-click="maxLimit = maxLimit + 50">Show More...</a>

  2. 单向绑定-正如Ganesh指出的，如果你的数据没有改变，那么使用单向绑定代替:<th>{{::data.id}}</th>

相关文章：