Infinte scroll from remote resource

ionic-v1
1

I have a JSON service that returns data in arrays of a maximum of ten.

The total number of entries returned from the service is way more than that. The original plan was to paginate through the records, ten at a time, then when necessary call the next 10 records.

Can I use infinite scroll so that we render the current view with the first ten records. Then when we scroll to the end the next ten loads and so on?

I tried to implement like so in my template:

<ion-infinite-scroll on-infinite="loadMore()" ng-if="moreCanBeLoaded()" distance="10%" icon="ion-loading-d"></ion-infinite-scroll>

In my controller loadMore() calls a service:

$scope.loadMore = function onLoadMore() {

return TransactionService.dailyTransactions().then(function(data) {
	$scope.transactions = $scope.transactions.concat(data.data.data);
	$scope.$broadcast('scroll.infiniteScrollComplete');
});

};

With the service posting the required page number to retrieve. Every time the service is called the page number is incremented and the next data set will be concatenated with the previous.

I only ever see loadMore called once regardless. So was wondering if I am chasing my tail with this and infinite scroll is not suitable.

2

What version of Ionic are you using?

The nightly version of infinite scroll should be able to do this just fine. There is a caveat though. If the first 10 items don’t fill the view and show a need for scrolling, then on-infinite will not fire. So, you may need to load more than 10 or change their size to extend the view so that scrolling is triggered.

BTW : The Beta is possibly coming this week. I think it’s going to have a really nice infinite scroll update that will be very performant and limit the view to only the actual elements being displayed.

Beta 2 coming soon next week! Lots of improvements, including a huge list update!

— ionic (@Ionicframework) April 28, 2014
1 Like