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,409 total views, 1 views today
April 5, 2016 at 9:32 pm
Thanks again for the post. Really Cool.