lazy-scroll demo: Infinate scroll loading

Here is a demo application using lazy scroll.

We are going to  create a new HTML page , Here we are using angularjs and bootstrap for CSS.

First we can initiate  our angularjs app in body tag like ng-app=”testModule”.

<body ng-app="testModule">

we are going to define our module and it is depending lazy-scroll.

var app = angular.module("testModule",['lazy-scroll']);

Next step we have to add  our controller  into div.

        <div  ng-controller="testController" ></div>

We are defining our controller to load data as below

app.controller('testController', function($scope) {
    });

 



Let us write some function to controller to load some dummy data . we can load  define some initial value

var start = 0; // where to start data
var ending = start+10; // how much data need to add on each function call
var lastdata = 100; // maximum number of calls.
var reachLast = false; // to check the page ends last or not

Here we  going to define one more variable $scope.loadmore  this we can use to show to user for loading data.

    $scope.loadmore = "Loading More data..";

We can write our function (i am nameing it as listData) to get data and store into a variable (testData). It will make a blank array on starting and it will add data into  testData when function is calling.

$scope.listData = function() {
         if(reachLast){
             return false;
         }
        var jsondt = [];
            for (var i = start; i < ending; i++) {
                jsondt.push({
                                id: i, name: "name"+i
                          });
                };
                start = i;
                ending = i+10;
    
             $scope.testData =$scope.testData.concat(jsondt);


                     if(ending >= lastdata) {
                         reachLast = true;
                         $scope.loadmore = "Reached at bottom";
                     }
            };



So our final controller will look like as below,

app.controller('testController', function($scope) {
    var start = 0;
    var ending = start+5;
    var lastdata = 100;
    var reachLast = false;

    $scope.loadmore = "Loading More data..";
     $scope.testData = [];


     $scope.listData = function() {
         if(reachLast){
             return false;
         }
        var jsondt = [];
            for (var i = start; i < ending; i++) {
                jsondt.push({
                                id: i, name: "name"+i
                          });
                };
                start = i;
                ending = i+10;
    
             $scope.testData =$scope.testData.concat(jsondt);


                     if(ending >= lastdata) {
                         reachLast = true;
                         $scope.loadmore = "Reached at bottom";
                     }
            };


                 $scope.listData();
                     
    });

Next we can write a ng-repeat which will get data from our function testData.

   <div class="col-md-6 portfolio-item" ng-repeat="data in testData" >
              {{data.id}}
            </div>

Now we can add lazy-scroll directive into our div , so it will call the function load data on scroll.

lazy-scroll="listData()"

Let us add some more magical functionality into it by adding lazy-scroll-trigger . it will control  when the scroll functionality need to call. it is on percentage , we can give the percentage of screen , when it needs to trigger. By default it will be 90percentage , That means it will load data when user reaches 90 percentage of window.

We can change into 50 percentage by giving below.

lazy-scroll-trigger="50"

 



If we want to disable scroll we can use

lazy-no-scroll="false"

At the bottom of page we can add a div and we can call on ng-click to make sure it will work still if any problems occure

<div class="col-md-10 portfolio-item" ng-click="listData()">
                {{loadmore}}
            </div>



you can check out the demo page here.

Demo

Hope it will help some one 🙂

 

 

 

 

 11,681 total views,  1 views today

1 Comment

  1. Thanks again for the post. Really Cool.

Leave a Reply

Your email address will not be published.