ionic►infinite scroll

Infinite Scroll in Ionic Framework Pulling Real Data

By: Ryan Wong at

I’ve looked at lots of tutorials on the internet, and none of they show you a fully functional
infinite scroll.

Heres My full Example:

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<ion-content>
<ion-refresher
    pulling-text="Pull to refresh..."
    on-refresh="doRefresh()">
</ion-refresher>
<ul class="listing">
  <li ng-repeat="oneItem in items">
  <div class="stat-row">
   <div class="username">{{oneItem.username}}</div>
   <div class="rank">{{oneItem.rank | number:0}}</div>
  </div>
  </li>
</ul>
  <ion-infinite-scroll  ng-if="!noMoreItemsAvailable"
  on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>
  <div class="noSourceFound" ng-if="noItemFound">
    <p>Sorry No Media Found</p>
  </div>
  <br/>
  <br/>
</ion-content>

JS Controller

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
'use strict';

function ListAllCtrl($s, lS) {
$s.items = [];
$s.page = 1;
$s.limit = 10;
$s.noMoreItemsAvailable = false;
$s.noItemFound = false;

$s.loadMore = function(){
  lS.getRows($s.page, $s.limit).then(function(items) {
   if (items.numPages == items.page){
       $s.noMoreItemsAvailable = true;
       $s.$broadcast('scroll.infiniteScrollComplete');
   }
   if (items.numPages == 0 || items.total == 0){
       $s.noMoreItemsAvailable = true;
       $s.noItemFound = true;
   }
   $s.page++;
   $s.items = $s.items.concat(items.list);
   $s.$broadcast('scroll.infiniteScrollComplete');
     });
};

 $s.doRefresh = function(){
     $s.items = [];
     $s.page = 1;
     $s.noMoreItemsAvailable = false;
     $s.loadMore();
     $s.$broadcast('scroll.refreshComplete');
 };
}

angular.module('controllers',[])
.controller('ListAllCtrl', ['$scope', 'listService', ListAllCtrl]);

AJAX Request

1
2
3
4
5
6
7
8
9
10
11
12
{
 "page" : 1,
 "numPages": 7,
 "total": 10,
 "list" : [{
  "id" : 1,
  "blah": "blah"
 },{
  "id" : 1,
  "blah": "blah"
 }]
}

Angular Service

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function listService(baseUrl, $q, $http){
  this.someUrl = baseUrl() + '/api/v1/someurl';

  this.getRows = function(page, limit){
    var deferred = $q.defer();
    $http({
      method: 'GET',
      url: someUrl + '?page=' + page + '&limit=' + limit
    })
    .success(function(data) {
      return deferred.resolve(data);
    })
    .error(function(err,status) {
      return deferred.reject(err);
    });
    return deferred.promise;
  }
};

angular.module('services', [])
.service('listService', ['baseUrl', '$q', '$http', listService])

Some Issues I faced when using other methods are:

  • double loading row when there is only 1 row
  • double loading no results found
  • loading uncontrollably
  • if loading lots of rows, the last row will appear below your tabs if you have them. The solution is add <br/> to the bottom of <ion-content>

Some features you may consider that aren’t shown here are:

  • what to show when you have no internet connection
  • what to show when server is down

Also make sure you add br to the end of ion-content or padding bottom since the scroll view will cut off the last row in the list on your phone. You won’t see this error in your browser but it will happen on your phone.
Hope this helps you out