Jan Amoyo

Increasing ngRepeat Limit on Scroll

The example below shows how to increase the limitTo filter of ngRepeat everytime the div scrollbar reaches the bottom.

This technique is used to improve performance by only rendering ngRepeat instances that are visible from the view.

First, we create a directive that calls a function whenever the div scrollbar reaches the bottom:

module.exports = function (_module) {
  'use strict';
  _module.directive('bufferedScroll', function ($parse) {
    return function ($scope, element, attrs) {
      var handler = $parse(attrs.bufferedScroll);
      element.scroll(function (evt) {
        var scrollTop    = element[0].scrollTop,
            scrollHeight = element[0].scrollHeight,
            offsetHeight = element[0].offsetHeight;
        if (scrollTop === (scrollHeight - offsetHeight)) {
          $scope.$apply(function () {
            handler($scope);
          });
        }
      });
    };
  });
};

Line 5 compiles the expression passed to the directive.
Line 6 listens for scroll events on the directive element (requires jQuery).
Line 10 checks if the scrollbar has reached the bottom.
Line 12 applies the compiled expression to the scope.

Then, we apply the directive to our view:

<div buffered-scroll="increaseLimit();" ng-init="limit=15;">
  <table>
    <tr ng-repeat="item in items | limitTo:limit">
      ...
    </tr>
  </table>
</div>

Line 1 assigns a function expression to the directive and initializes the limit variable.
Line 3 declares the ngRepeat with a limitTo filter.

Finally, we create the scope function that increases the limit variable if the value is still less than the number of items iterated by ngRepeat.

$scope.increaseLimit = function () {
  if ($scope.limit < $scope.items.length) {
    $scope.limit += 15;
  }
};

A working example is available at Plunker.

The same technique can be used to implement "infinite scroll" by calling a function that appends data from the server instead of increasing the limitTo filter.