Post
Ask Question

ASP.NET MVC Infinite Scrolling With AngularJS

Today we are going to know about infinite/unlimited scrolling in AngularJS.

Infinite/unlimited scroll is while we scroll down our web page it’ll automatically load next paged data. Facebook has this type of feed loading.

Let’s Get Started

Let’s create a view with directive ‘when-scrolled’. AngularJS ‘when-scrolled’ directive is to implement infinite scrolling, which is supposed to detect the div scroll.

when-scrolled="loadData(1)"

Here ‘loadData(1)’ callback function will get called while div/page is scrolled. In this method we have passed parameter value ‘1’ to detect, is it default data load or scroll load call.

$scope.loadData = function (IsPaging) {}

This is where we passed the parameter in our ngController method.

Finally, the View:

  1. <div class="widget-content content_scroll" when-scrolled="loadData(1)">  
  2.     <table class="table table-striped table-bordered table-hover table-checkable datatable">  
  3.         <thead>  
  4.             <tr>  
  5.                 <th>Office ID</th>  
  6.                 <th>Office Code</th>  
  7.                 <th>Office Name</th>  
  8.                 <th>Is Active</th>  
  9.                 <th>Create Date</th>  
  10.                 <th>Create By</th>  
  11.                 <th>Edit Date</th>  
  12.                 <th>Edit By</th>  
  13.                 <th>Status</th>  
  14.             </tr>  
  15.         </thead>  
  16.   
  17.         <tbody>  
  18.             <trng-repeat="dataModel in ListOffice">  
  19.                 <td>{{dataModel.OfficeID}}</td>  
  20.                 <td>{{dataModel.OfficeCode}}</td>  
  21.                 <td>{{dataModel.OfficeName}}</td>  
  22.                 <td>{{dataModel.IsActive}}</td>  
  23.                 <td>{{dataModel.CreateDate|date:"MM/dd/yyyy 'at' h:mma"}}</td>  
  24.                 <td>{{dataModel.CreateBy}}</td>  
  25.                 <td>{{dataModel.EditDate|date:"MM/dd/yyyy 'at' h:mma"}}</td>  
  26.                 <td>{{dataModel.EditBy}}</td>  
  27.                 <td>  
  28.                     <span class="label label-warning">  
  29. <a href="javascript:void(0);" class="bs-tooltip" title="Edit" ng-click="getOffice(dataModel)">  
  30. <i class="icon-pencil"></i>  
  31. </a>  
  32. </span>  
  33.                     <span class="label label-danger">  
  34. <a href="javascript:void(0);" class="bs-tooltip" title="Delete" ng-click="deleteOffice(dataModel)">  
  35. <i class="icon-trash"></i>  
  36. </a>  
  37. </span>  
  38.                 </td>  
  39.                 </tr>  
  40.         </tbody>  
  41.     </table>  
  42.     <div class="loadmore">  
  43.         <div ng-show="loaderMore" ng-class="result">  
  44.             <imgsrc="~/Areas/Crm/Content/img/ng-loader.gif" />{{LoadMessage}}  
  45.         </div>  
  46.         <div ng-show="scrollended" ng-class="result">  
  47.             {{LoadMessage}}  
  48.         </div>  
  49.     </div>  
  50. </div>  
We have declared directive ‘when-scrolled’ in our view, now we have to add directive in our module. In this app which is: angular.module('uCRM_App', [])

The directive: This will detect the scroll position of page/div.
  1. .directive('whenScrolled', function()  
  2.  {  
  3.     return function(scope, elm, attr)  
  4.     {  
  5.         var raw = elm[0];  
  6.         elm.bind('scroll', function()  
  7.              {  
  8.             if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight)  
  9.             {  
  10.                 scope.$apply(attr.whenScrolled);  
  11.             }  
  12.         });  
  13.     };  
  14. })  
In our controller method we have pushed data into the array in scope to update the view.
  1. for (model in data)  
  2. {  
  3.     $scope.ListOffice.push(data[model]);  
  4. }  
As we know AngularJS will update the view when scope is changed/update.

Finally the Script:
  1. angular.module('uCRM_App', [])  
  2.   
  3. .directive('whenScrolled', function()  
  4.  {  
  5.     return function(scope, elm, attr)  
  6.     {  
  7.         var raw = elm[0];  
  8.         elm.bind('scroll', function()  
  9.         {  
  10.             if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight)  
  11.             {  
  12.                 scope.$apply(attr.whenScrolled);  
  13.             }  
  14.         });  
  15.     };  
  16. })  
  17.   
  18. .controller('OfficeController', function($scope, $http)  
  19.  {  
  20.   
  21.     $scope.loaderMore = false;  
  22.     $scope.scrollended = false;  
  23.   
  24.     var IsPaging = 0;  
  25.     var UserID = 1;  
  26.     var page = 1;  
  27.     var PageSize = 20;  
  28.     var inCallback = false;  
  29.     var totalData = 0;  
  30.   
  31.     //******=========Get All Data with Paging=========******  
  32.     $scope.loadData = function(IsPaging)  
  33.     {  
  34.         vargeturl = '/Crm/api/Office/Get/';  
  35.         if (IsPaging === 1)  
  36.         {  
  37.             //debugger;  
  38.             IsPaging = 1;  
  39.             if (page > -1 && !inCallback)  
  40.             {  
  41.                 inCallback = true;  
  42.                 page++;  
  43.   
  44.                 $scope.loaderMore = true;  
  45.                 $scope.LoadMessage = ' Loading page ' + page + ' of ' + PageSize + ' data...';  
  46.                 $scope.result = "color-green";  
  47.   
  48.                 $http({  
  49.                         method: 'GET',  
  50.                         url: geturl + UserID + '/' + page + '/' + PageSize + '/' + IsPaging,  
  51.                     })  
  52.                     .success(function(data)  
  53.                        {  
  54.                         totalData = data.length;  
  55.                         if (totalData === 0)  
  56.                         {  
  57.                             $scope.loaderMore = false;  
  58.                             $scope.scrollended = true;  
  59.                             $scope.LoadMessage = 'No more data...!';  
  60.                             $scope.result = "color-red";  
  61.   
  62.                             Command: toastr["warning"]("No more data...!");  
  63.   
  64.                             inCallback = false;  
  65.                             page = -1;  
  66.                         } else {  
  67.                             for (model in data)  
  68.                             {  
  69.                                 $scope.ListOffice.push(data[model]);  
  70.                             }  
  71.                             $scope.loaderMore = false;  
  72.                             inCallback = false;  
  73.                         }  
  74.   
  75.                     }).error(function(error)  
  76.                      {  
  77.                         alert('Error Loading..');  
  78.                     })  
  79.             }  
  80.         } //unlimited load data while scroll  
  81.         else {  
  82.             //debugger;  
  83.             IsPaging = 0;  
  84.             $scope.loaderMore = true;  
  85.             $scope.LoadMessage = ' Loading page ' + page + ' of ' + PageSize + ' data...';  
  86.             $scope.result = "color-green";  
  87.   
  88.             $http({  
  89.                 method: 'GET',  
  90.                 url: geturl + UserID + '/' + page + '/' + PageSize + '/' + IsPaging,  
  91.             }).  
  92.             success(function(data)  
  93.              {  
  94.                 $scope.ListOffice = data;  
  95.                 $scope.loaderMore = false;  
  96.             }).  
  97.             error(function()  
  98.             {  
  99.                 $scope.message = 'Unexpected Error while loading data!!';  
  100.                 console.log($scope.message);  
  101.             });  
  102.         } //default load data while pageload  
  103.   
  104.     };  
  105.     $scope.loadData();  
  106. });  
Output

output


Similar Articles