I'm currently working on incorporating an ion-infinite-scroll feature using the ionic framework. My REST API allows me to set the index in order to request a specific range of data. Here's what my Service looks like, with 'begin' and 'end' representing the indexes:
this.GetUserRatings = function (id, begin, end) {
return $http.get($rootScope.endPoint + '/user/' + id + '/ratings/'+ begin + '/' + end);
};
Upon initial page reload, I want to display 10 items in the list. Therefore, in my controller it would look something like this:
UserService.GetUserRatings($stateParams.id, 1, 10)
.success(function (data) {
$scope.userRatings = angular.fromJson(data);
}).error(function(error) {
//handle error
});
As I continue scrolling down the list, I aim for the ion-infinite-scroll component to fetch the next 10 items (11 - 20), then the following batch (21 - 30), and so forth. How can I achieve this?
$scope.loadMore = function() {
// UserService.GetUserRatings($stateParams.id, ?, ?)
// $scope.ratings.push({...}); This code snippet might be executed within the success block
//how do I determine when there are no more results
$scope.$broadcast('scroll.infiniteScrollComplete');
};
$scope.ratings = [];
In the view template, you'll see something like this:
<ion-infinite-scroll ng-if="noMoreResults" on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>