In this code snippet, I am utilizing the "$http.get" request to fetch data from a Web API in Angular.js.
The API URL includes a parameter called "pageNo=" which requires a digit to be added at the end in order to retrieve data for a specific page number. This is done to manage heavy request loads, with each page containing 10 records.
I have defined a scope variable ($scope.pageCount) and passed it along with the URL. This approach works well as it allows me to fetch 10 records at a time.
Now, the next challenge is to load more data on scroll down (similar to using an infinite-scroll feature) and append it to the existing list of data.
Is there a way to retrieve additional data from the same request? I have integrated 'infinite-scroll' into the application and receive an alert when scrolling down.
Below is the current function that is operational:
app.controller('SpotLightCtrl', function ($scope, $http, shareEventID) {
$scope.pageCount = 1;
$http.get("https://stg.myapi.svc/pageNo="+$scope.pageCount+)
.then(function (response) {
$scope.data = response.data;
$scope.loadMore = function () {
alert('Load more records');
};
});
});
Below is the HTML code:
<div class="content-block spotlight-listing" ng-controller="SpotLightCtrl" infinite-scroll='loadMore()' infinite-scroll-distance='1'>
<h1>Spotlight</h1>
<div ng-repeat="event in data.eventList" class="deals-block">
<div class="col-md-4 col-xs-12 img-style">
<a href="/SpotLight-Detail"><img ng-src="{{event.eventPosterImage}}" class="img-responsive img-rounded" /></a>
</div>
</div>
</div>
If any part of this explanation is unclear, please let me know. Any assistance would be greatly appreciated...