Myujth

I have an array of response that came from the server with pagination. I want whenever a user scrolls down for more result the next page data should be loaded. Until user did not scroll down the data came from only page 1 and when user scroll down the page should be changed as 2,3,4,.. so on.
can anyone help me to create infinite scroll in angularjs.

You can refer my sample, what I apply for table

Html code :

<div ng-controller="appController">

 <h1>This is my title Items: numberToDisplay/totalDisplay</h1>
 <div class="constrained">
 <table class="table table-striped" id="loggingTable" infinite-scroll="loadMore()" infinite-scroll-container='".constrained"' infinite-scroll-distance="1" infinite-scroll-parent="true">
 <tr data-ng-show="logEventFilter.length === 0">
 <td class="center" colspan="3">Nobody is here</td>
 </tr>

 <tr data-ng-repeat="logEvent in logEventFilter = (logEvents | limitTo:numberToDisplay) track by $index">
 <td> $index </td>
 <td> logEvent.name </td>
 <td> numberToDisplay </td>
 </tr>
 </table>
 </div>

</div>

Angularjs code :

 var app = angular.module('app', ['infinite-scroll'])
 .controller('appController', appController);

 appController.$inject = ['$scope', '$window'];

 function appController($scope, $window) 

 $scope.title = "infinite scroll example";
 $scope.numberToDisplay = 20;
 $scope.totalDisplay = 500;
 $scope.logEvents = ;
 for (var i = 0; i < $scope.totalDisplay; i++) 
 $scope.logEvents.push(
 name: "Hello, my name is " + i
 );
 

 $scope.loadMore = function() 
 if ($scope.numberToDisplay + 5 < $scope.logEvents.length) 
 $scope.numberToDisplay += 5;
 else 
 $scope.numberToDisplay = $scope.logEvents.length;
 
 ;
 ;

sample scroll infinite

you can you angular ui scroll

This helps in loading the data as and when the user scrolls down.