I am a beginner in AngularJS and Ajax requests. I created a demo where I make an Ajax request to get remote data and display it in a list. My goal is to initially show only 10 results when the page loads for the first time, and then load the next 10 results as the user scrolls down.
I also created another demo, but it continues to load infinite lists, making unnecessary HTTP requests each time. I want it to make only one HTTP request and display 10 results at a time. It should only fetch more results when the user scrolls down to request the next set of 10.
Below is my code:
HTML
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="mycss.css">
<script src="angular/angular.js"></script>
<script src="angular/angular-touch.js"></script>
<script src="app.js"></script>
</head>
<body>
<div data-ng-app='demo'>
<div data-ng-controller='MainController'>
<ul class='hello' when-scrolled='more()'>
<li data-ng-repeat='item in items'>
{{item}}
</li>
</ul>
<div data-ng-show='loading'>Loading</div>
</div>
</div>
<h1>INFINITE SCROLLING IN ANGULARJS</h1>
</body>
</html>
JavaScript
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
var caymanauth ='MTIzNDU2ODk6ZUVqVFpmcnRJMQ==';
app = angular.module("demo", []);
var API_HOST ='http://caymanafterwork.netcluesdemo.com/beta';
app.controller("MainController", function($scope, $http) {
// the array which represents the list
$scope.items = ["1. Scroll the list to load more"];
$scope.loading = true;
// this function fetches a random text and adds it to array
$scope.more = function() {
$http({
// method: "GET",
// url: "https://baconipsum.com/api/?type=all-meat¶s=2&start-with-lorem=1"
method: 'POST',
url: API_HOST+'/webservice/listinglist',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'caymanauth': caymanauth
},
data: "&Start="+0+"&Pagesize="+6+"&SearchTxt="+''+"&FilterTxt="+''+"&FilterStarSearch="+''+"&FilterPriceSearch="+''+"&FilterLocationSearch="+''+"&FilterCuisineSearch="+''+"&FilterCategorySearch="+''+"&FkCategory=1"
}).success(function(data, status, header, config) {
console.log("========my response is=============",data);
// returned data contains an array of 2 sentences
// for (line in data) {
// newItem = ($scope.items.length + 1) + ". " + data[line];
// $scope.items.push(newItem);
// }
for (var i = 0 ; i< data['Details'].length ; i++)
{
var newItem = ($scope.items.length + 1) + ". "+data['Details'][i]['varTitle'];
$scope.items.push(newItem);
$scope.loading = true;
}
$scope.loading = false;
});
};
// we call the function twice to populate the list
$scope.more();
});
// we create a simple directive to modify behavior of <ul>
app.directive("whenScrolled", function() {
return {
restrict: 'A',
link: function(scope, elem, attrs) {
// we get a list of elements of size 1 and need the first element
raw = elem[0];
// we load more elements when scrolled past a limit
elem.bind("scroll", function() {
if (raw.scrollTop + raw.offsetHeight + 5 >= raw.scrollHeight) {
scope.loading = true;
// we can give any function which loads more elements into the list
scope.$apply(attrs.whenScrolled);
}
});
}
}
});