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>
  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', [])
  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. })
  18. .controller('OfficeController', function($scope, $http)
  19. {
  21. $scope.loaderMore = false;
  22. $scope.scrollended = false;
  24. var IsPaging = 0;
  25. var UserID = 1;
  26. var page = 1;
  27. var PageSize = 20;
  28. var inCallback = false;
  29. var totalData = 0;
  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++;
  44. $scope.loaderMore = true;
  45. $scope.LoadMessage = ' Loading page ' + page + ' of ' + PageSize + ' data...';
  46. $scope.result = "color-green";
  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";
  62. Command: toastr["warning"]("No more data...!");
  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. }
  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";
  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
  104. };
  105. $scope.loadData();
  106. });
Output

output