I am using NIS to make endless scrolling, I implemented and it works fine except one issue. Like I am using float: left
to maintain the div tag. But after using float
it sends multiple request at a time, but when I remove float:left
it sends single request which I want.
I am getting 20 results at a time from server
I don't have public URL to give example on JsFiddle or Plunker.
Here is my code
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script src="js/angular/lib/angular.min.js"></script>
<script src="js/angular/lib/ng-infinite-scroll.min.js"></script>
<script src="js/angular/customjs/endless_scroll.js"></script>
<style type="text/css">
.test{
float:left;
}
</style>
</head>
<body ng-app="myApp">
<div ng-controller='DemoController'>
<div id="scroll" infinite-scroll='reddit.nextPage();'
infinite-scroll-container="'scroll'"
infinite-scroll-disabled='reddit.stopscript'
infinite-scroll-distance='2'>
<div ng-repeat='item in reddit.items'>
<div class="test">
<div style="height:30px;width:200px; border-style:solid;border-width:medium;">{{item.bookmark_id}}</div>
<div style="height:100px;width:200px; border-style:solid;border-width:medium;">{{item.bookmark_title}}</div>
</div>
</div>
</div>
<div ng-show='reddit.busy'>Loading data...</div>
</div>
</body>
</html>
And here is my controller
var myApp = angular.module('myApp', ['infinite-scroll']);
myApp.controller('DemoController', function ($scope, Reddit) {
$scope.reddit = new Reddit();
});
myApp.factory('Reddit', function ($http) {
var Reddit = function () {
this.items = [];
this.busy = false;
this.stopscript = false;
};
Reddit.prototype.nextPage = function () {
if (this.busy){
return;
}
else{
this.busy = true;
var url = "http://example.com/get_recent_articles/";
$http.get(url).success(function (data) {
if (data.recently_added.bookmarks.length == 0) {
this.stopscript = true;
}
else {
this.items.push.apply(this.items, data.recently_added.bookmarks);
}
this.busy = false;
}.bind(this));
}
};
return Reddit;
});
Can anybody help me to resolve this issue?
Thank You.