AngularJS Infinite Scroll

Infinite scroll basic using local and remote data.

by Rishi Kumar

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngInfiniteScroll/1.2.2/ng-infinite-scroll.js"></script>
<div ng-controller="appController">
  <div>
    <h1>This is my {{title}} Items: {{number.LocalnumberToDisplay}}/50</h1>
    <div id="constrained1">
      <div id="loggingTable" infinite-scroll="loadMoreLocal(logEventsLocal.length)" infinite-scroll-container='"#constrained1"' infinite-scroll-distance="0" infinite-scroll-disabled='busyLoadingDataLocal' infinite-scroll-parent="true">
        <div class="constrained" style="height:100px;width:100%;border:1px solid black; margin:5px;" ng-repeat="len in logEventsLocal">
          {{len.name}}
        </div>
      </div>
    </div>
  </div>
  <div>
    <h1>This is my {{title}} Items: {{number.RemotenumberToDisplay}}/50</h1>
    <div id="constrained2">
      <div id="loggingTable" infinite-scroll="loadMoreRemote(logEventsRemote.length)" infinite-scroll-container='"#constrained2"' infinite-scroll-disabled='busyLoadingDataRemote' infinite-scroll-distance="0" infinite-scroll-parent="true">
        <div class="constrained" style="height:100px;width:100%;border:1px solid black; margin:5px;" ng-repeat="len in logEventsRemote">
          {{len.name}}
        </div>
      </div>
    </div>
  </div>

</div>

CSS

#constrained1 {
  margin: 10px;
  padding: 10px;
  height: 200px;
  overflow: auto;
  border: 1px solid lightgray;
}

#constrained2 {
  margin: 10px;
  padding: 10px;
  height: 200px;
  overflow: auto;
  border: 1px solid lightgray;
}

JavaScript

var app = angular.module('app', ['infinite-scroll'])
       .controller('appController', appController);

   appController.$inject = ['$scope', '$window', '$http'];

   function appController($scope, $window,$http) {

       $scope.title = "infinite scroll example";
       $scope.searchTerm = "";
       $scope.number = {LocalnumberToDisplay:5,RemotenumberToDisplay:0};
			 $scope.logEventsRemote = [];
       $scope.logEventsLocal = [{name: "Hello, my name is 1"},{name: "Hello, my name is 2"},{name: "Hello, my name is 3"},{name: "Hello, my name is 4"},{name: "Hello, my name is 5"}];
       

       $scope.loadMoreLocal = function(length) {
          if(length >= 50){
         		$scope.busyLoadingDataLocal = true;
          	return "";
          }
          for (var i = length + 1; i <= length + 5; i++) {
           $scope.logEventsLocal.push({
               name: "Hello, my name is " + i
           });
       }
       $scope.number.LocalnumberToDisplay = length+5;
   }
   $scope.loadMoreRemote = function(length) {
          
         /* $http.get("url?from="+length+"&to="+length+5).success(function(data){
            if(data == "no_more_records_found"){
              return "";
            }else{
              $scope.logEventsRemote.concat(data);
            }
          })
                 $scope.number.RemotenumberToDisplay = length+5; */
   }
};