How to improve performance of ngRepeat over a huge dataset (angular.js)?

I agree with @AndreM96 that the best approach is to display only a limited amount of rows, faster and better UX, this could be done with a pagination or with an infinite scroll.

Infinite scroll with Angular is really simple with limitTo filter. You just have to set the initial limit and when the user asks for more data (I am using a button for simplicity) you increment the limit.

    <tr ng-repeat="d in data | limitTo:totalDisplayed"><td>{{d}}</td></tr>
<button class="btn" ng-click="loadMore()">Load more</button>

//the controller
$scope.totalDisplayed = 20;

$scope.loadMore = function () {
  $scope.totalDisplayed += 20;  

$ = data;

Here is a JsBin.

This approach could be a problem for phones because usually they lag when scrolling a lot of data, so in this case I think a pagination fits better.

To do it you will need the limitTo filter and also a custom filter to define the starting point of the data being displayed.

Here is a JSBin with a pagination.

Leave a Comment