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.
Hope it will help some one 🙂
11,681 total views, 1 views today
April 5, 2016 at 9:32 pm
Thanks again for the post. Really Cool.