Ionic Infinite Scroll And Paginated API

1

Wondering how to do infinite scroll with a paginated api?

examples / help would be appreciated.

2

solved

controller

.controller('PilotsCtrl', function($scope, $state, PilotFactory, $ionicLoading, $timeout ) {
  var vm = this;
  vm.pilots = [];
  vm.currentPage = -1;
  vm.noMore = false;

  $ionicLoading.show({template: 'Loading Pilots... </br> Please wait...'});

  vm.loadMoreData = function() {
    vm.currentPage++;
    console.log(vm.currentPage);
    PilotFactory.getPilots(vm.currentPage).then(function(pilotsData) {
      if (pilotsData == 0) {
        vm.noMore = true;
      }; 
      
      vm.pilots = vm.pilots.concat(pilotsData);
      $ionicLoading.hide();
      $scope.$broadcast('scroll.infiniteScrollComplete');
    });
  };

  vm.viewPilot = function(pilot_id) {
    $state.go('menu.pilot', {id: pilot_id});
  };
})

factory

.factory('PilotFactory', function(Restangular, $q, v2015Restangular) {
  return {
    getPilots: function(page){
      return v2015Restangular.all('pilots').getList({page: page}).then(function(pilotsData) {
        if (pilotsData != 0) {
          return pilotsData;
        } else {
          return 0;
        };
      });
    },
    getPilot: function(id) {
     return v2015Restangular.one('pilot', id).get();
    }
  };
})

html

<ion-infinite-scroll on-infinite="vm.loadMoreData()" ng-if="!vm.noMore" distance="10%"></ion-infinite-scroll>
3

One suggestion -> You requests are done by a promise but you are only handling the success case.

There you hide the loading indicator -> please hide it also, when your request fails because otherwise it will be shown everytime.

4

@cyprusglobe Thanks for your resolution. :smile:

5

Anyone can share example for this on ionic 2?