Cfrgtkky

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.