Infinite-scroll for facebook like pagination in AngularJS

Today I will show you, how to implement Infinite-scroll for facebook like pagination in AngularJS for make our web application a little more attractive.

So, What is Infinite-scroll ?

Infinite-scroll is also known as "endless scrolling", "lazy loading" etc. Infinite scroll is a way to load more data using Ajax request while page goes to scroll down. You may have seen this technique on the Facebook timeline or on Twitter's homepage.
Infinity scroll in AngularJS
Loading...
Name Email Country City
{{emp.FirstName}} {{emp.LastName}} {{emp.EmailID}} {{emp.Country}} {{emp.City}}
Infinite-scroll for facebook like pagination in AngularJS
var app = angular.module('myApp', []);
app.controller('InfinityScrollController', ['$scope', '$http', function ($scope, $http) {
    $scope.CurrentPage = 1;
    $scope.TotalPage = 0;
    $scope.EmployeeList = [];

    function GetEmployeeData(page) {
        $scope.IsLoading = true;
        $http({
            method: 'GET',
            url: '/home/getEmployeeData',
            params: { 'page': page }
        }).then(function (response) {
            angular.forEach(response.data.List, function (value) {
                $scope.EmployeeList.push(value);
            });
            $scope.TotalPage = response.data.totalPage;
            $scope.IsLoading = false;
        }, function () {
            $scope.IsLoading = false;
        })
    }

    GetEmployeeData($scope.CurrentPage);

    $scope.NextPage = function () {
        if ($scope.CurrentPage < $scope.TotalPage) {
            $scope.CurrentPage += 1;
            GetEmployeeData($scope.CurrentPage);
        }
    }
}]);

//directive
app.directive('infinityscroll', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.bind('scroll', function () {
                if ((element[0].scrollTop + element[0].offsetHeight) == element[0].scrollHeight) {
                    //scroll reach to end
                    scope.$apply(attrs.infinityscroll)
                }
            });
        }
    }
});
Posted By :