Ionic Pagination starting - angularjs

Question

I am trying to create a pagination feature but I feel stuck. I am not sure if I am on the right track...
in my view, I have an ng-repeat=" res in result", and at the end of the page i placed the following:
<ion-infinite-scroll on-infinite="loadMore()" distance="1%"></ion-infinite-scroll>
then in the controller, i wrote this:
var i=1;
$http.get( "http://website/search/"+i).success(function(response){
i++;
$scope.result=(response)
});
}
each pages returns a json containing 15 elements. What I want to do is when i reach the end, I want to load the next 15 in the result to be displayed.

Answer 1

You have to fetch next 15 item in loadMore function in controller as you write on-infinite="loadMore()" in ion-infinite-scroll
Write function as follow in your controller
$scope.result = [];
var i=1;
$scope.loadMore = function(){
$http.get( "http://website/search/"+i).success(function(response){
i++;
$scope.result.push(response);
});
}
Check Example

Answer 2

Hears how I have implemented infinite-scroll in my app
<ion-infinite-scroll ng-if="!loadMorePeople" on-infinite="loadPeople()" distance="1%"></ion-infinite-scroll>
loadPeople() loads all the scrolled data, it's code is bellow
$scope.loadMorePeople=false;
$scope.loadPeople = function() {
if($scope.peoples != null){
$http({
method: "get",
url: baseUrl+"company-members?page="+$scope.pagePeople,
withCredentials: true,
headers: {
'Accept' : 'application/json, text/plain, */*',
'Authorization' : ''+window.localStorage.getItem("token_type")+' '+window.localStorage.getItem("token")
}
})
.success(function(data) {
if(data.length > 0){
var newPeople = data;
$scope.temp = $scope.peoples.concat(newPeople);
$scope.peoples = arrayUnique($scope.temp, 'id');
function arrayUnique(collection, keyname) {
var output = [],
keys = [];
angular.forEach(collection, function(item) {
var key = item[keyname];
if(keys.indexOf(key) === -1) {
keys.push(key);
output.push(item);
}
});
return output;
};
++$scope.pagePeople;
$scope.$broadcast("scroll.infiniteScrollComplete");
}else{
$scope.loadMorePeople=true;
$scope.$broadcast("scroll.infiniteScrollComplete");
}
})
.error(function(data, status) {
});
}
$scope.$broadcast("scroll.infiniteScrollComplete");
};
I too had the same problem as you for some reason .push() was not working so I did this workaround.
I took the data checked if it's not null in if(data.length > 0){} and then used .concat(newPeople) to merge them and finally used arrayUnique($scope.temp, 'id') to make sure that there is no duplicate entity.
It's also a good idea to use ng-if="!loadMorePeople" it help to stop the call if there is no data left to fetch else the call will continously go on.
I hope this solves your problem. Let me know if you need any help :D