Hello Readers,

Today, We will discuss about on of the Ionic Framework directive ion-infinite-scroll.

ion-infinite-scroll directive allows you to load more data when you reach bottom of the page.

Code snippet to understand the functionality:

First we have to create a Ionic project.

index.Html

<ion-view>
    <ion-content class="has-header">
        <ion-list>
            <ion-item ng-repeat="user in users| limitTo:numberOfUsersToDisplay">
                <h2>Name: {{user.first_name}} {{user.last_name}}</h2>
                <p>Hobby: {{user.hobby}}</p>
            </ion-item>
        </ion-list>
        <ion-infinite-scroll ng-if="noMoreUsersAvailable" on-infinite="loadMoreUser()" distance="10%"></ion-infinite-scroll>
    </ion-content>
</ion-view>

controller.js

    $scope.users = [];
    $scope.noMoreUsersAvailable = true;
    $scope.numberOfUsersToDisplay = 0;
    $scope.loadMoreUser = function() {
        $http.post("demoJson/demo.json").success(function(response){
            $scope.users  = response;            
            if( $scope.users.length < $scope.numberOfUsersToDisplay ) 
            {
                $scope.noMoreUsersAvailable = false;
            }
            $scope.numberOfUsersToDisplay += 10; 
            $scope.$broadcast('scroll.infiniteScrollComplete');  
        });  
    };

In the above code i have used ion-infinite-scroll directive. ion-infinite called when we scrolls content more than distance from bottom.When ion-infinite done with the load new data, then scroll.infiniteScrollComplete event should be broadcast from your controller.

Hope this will help you..... :)