How to use ngInfiniteScroll

A demonstration of using ngInfiniteScroll directive for loading more data dynamically upon scrolling.

by Ahmad Baktash Hayeri

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ngInfiniteScroll/1.2.2/ng-infinite-scroll.min.js"></script>
<div ng-app='myApp' ng-controller='DemoController'>
  <div infinite-scroll="loadMore()">
    <div ng-repeat="product in productList" class="col-md-4 panel panel-info">
      <p class="panel-heading">{{product.id}} => {{product.name}}</p>
    </div>
  </div>
</div>

CSS

.panel,
.panel-heading,
.panel-body {
  padding: .5rem;
}

.panel {
  border: 1px solid gray;
}

.panel-heading {
  border: 1px solid red;
}

JavaScript

var myApp = angular.module('myApp', ['infinite-scroll']);
  myApp.controller('DemoController', function($scope, productFactory) {
      productFactory.get().then(function(response) {

        $scope.productList = [];
        for (var i = 0; i < 9; i++) {
          $scope.productList.push(response.data.products[i]);
        }

        $scope.loadMore = function() {
          var lastIndex = $scope.productList.length - 1;
          for (var j = 1; j <= 9; j++) {
            $scope.productList.push(response.data.products[lastIndex + j]);
          }
        };
      });
    })
    .factory('productFactory', function($q) {
      var products = [];
      for (var i = 0; i < 100; i++) {
        products.push({
          id: i,
          name: 'item#' + i
        });
      }

      var response = {
          data: {
            products: products
          }
        },
        deferred = $q.defer();

      deferred.resolve(response);

      return {
        get: function() {
          return deferred.promise;
        }
      }
    });