What is lazy scrolling?
lazy-scroll is a angularjs directive for infinite scrolling. Instead of click pagination links and going to next page , this will help to load data on scrolling as you can see in facebook .lazy-scroll will work with out jquery .
Download lazy-scroll
minified version | uncompressed version
What you have to do to implement on angularjs project?
lazy-scroll is a a simple directive for angularjs application. Simply we have to call the function which you want to call for pagination in lazy-scroll attribute.
It will magically load data and append into variable when user reaching bottom of page. There are API also available to controll the behaviour.
Just see some demo samples.
Check out some Demo
demo with explanation can see here
How do I use in my project?
you can download the minified version or you can use the cdn and follow simple 3 steps
Step 1 :
Add script at bottom of page after angularjs
<script src="path-to-script/angularjs.min.js"></script>
<script src="path-to-script/lazy-scroll.min.js"></script>
Step 2:
Ensure that your application module specifies lazy-scroll as a dependency.
var app = angular.module("yourModule",['lazy-scroll']);
Step 3:
Use the directive by specifying an lazy-scroll attribute on an element.
<div lazy-scroll="paginationFuntion()" lazy-scroll-trigger="80" >
That is it ! it will work like a magic
What is next?
Check our API from here
See some demo and implement 🙂
53,389 total views, 5 views today
September 15, 2015 at 8:03 am
Tanks for giving as directive
September 19, 2015 at 4:09 am
Thanks, works for me!!!
September 19, 2015 at 5:44 am
This website was… how do you say it? Relevant!! Finally I’ve found something that helped me.
Kudos!
September 19, 2015 at 7:43 am
Wow, this article is fastidious.
September 23, 2015 at 4:54 am
Very cool! Nice simple directive, will definitely be using this at some point. Thanks!
December 9, 2015 at 6:35 pm
very good alternative to ladda buttons, ur API really rocks and the directive is pretty well shown…Keep going…..
January 25, 2016 at 11:03 am
Hi ! Nice work man, thank you for sharing 😉
February 8, 2016 at 6:55 am
Thank’s Good.
May 6, 2016 at 7:12 pm
Appreciate you sharing, great forum post.Really thank you! Fantastic.
November 9, 2016 at 12:41 pm
In the below code what is problem?? of one scroll the ajax request have called n times
// Video Get ng
app.controller(‘videoController’, function($scope,$http,$attrs) {
var reachedLast = false;
$scope.testData = [];
$scope.loadmore = “Loading more data…”;
$scope.limhead = 100;
$scope.limexert = 200;
cat_slug = “video”;
cat_name = $attrs.catname;
NextpageNumber = 3;//next page is made it zeero on starting
$scope.listData = function() {
if(reachedLast)
return false;
$scope.url = ‘http://localhost/nif-portal-v1/ajx/ajxpostsub/load_more_posttyp/’+ cat_slug +’/’+ NextpageNumber;
$http.post($scope.url, {“data”: $scope.keywords}).success(function(data, status) {
$scope.status = status;
$scope.data = data;
var currentpage = NextpageNumber;//taking current pagenumber
var lastpage = data.total_data; //setting last page number
NextpageNumber = NextpageNumber + 3;
if((currentpage == NextpageNumber)){
return false;
}
if((currentpage >= lastpage)){
//reached at the bottom
reachedLast = true;
$scope.loadmore = “Reached at bottom”;
return false;
//$scope.$apply();
}
// $scope.tag_line(data.posts);
$scope.testData = $scope.testData.concat(data.posts);
}).error(function(data, status) {
$scope.data = data || “Request failed”;
$scope.status = status;
});
};
$scope.tag_line = function(pst){
console.log(pst);
console.log(“Called me lol”);
}
$scope.listData();// loading initial content
});
March 29, 2017 at 4:35 am
Amazing! Its in fact amazing piece of writing, I have got
much clear idea about from this paragraph.