Example of infinite scroll in Ionic with Firebase (utilizes Firebase.util.Scroll; http://firebase.github.io/firebase-util/)

controller.js

var app = angular.module('myapp', ['ionic', 'firebase'])

app.controller('ctrl', function($scope, $firebaseArray) {

  // create a connection to Firebase
  var baseRef = new Firebase('https://webapi.firebaseio.com/rolodex');
  // create a scrollable reference
  var scrollRef = new Firebase.util.Scroll(baseRef, 'name');

  // create a synchronized array on scope
  $scope.items = $firebaseArray(scrollRef);
  // load the first three contacts
  scrollRef.scroll.next(3);

  // This function is called whenever the user reaches the bottom
  $scope.loadMore = function() {
    // load the next contact
    scrollRef.scroll.next(1);
    $scope.$broadcast('scroll.infiniteScrollComplete');
  };

});

template.html

<ion-view view-title="Contacts">
  <ion-content class="padding">
  
    <div class="list card" ng-repeat="item in items">
       {{item|json}}  
    </div>
    <ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>
    
  </ion-content>
</ion-view>

@rizqyhi the way I do it (not sure it is the simplest) is when I save to Firebase I also add a time stamp to the (article) object and then use .indexOn in the Firebase rules to bump up performance. Then you can do something like:

ref.child("articles").orderByChild("timestamp").limitToLast(3)

That should grab you the last three articles added to your Firebase

Hi guys.

How do you guys initialize the Firebase.util.Scroll in ionic2/angular2?
And is there an npm that I need to install to use this library?
I have a problem on where to declare the javascript, whether I put it in my index.html, or somewhere else if using ionic2.

I get this exception when declaring the firebase-util.js in my index.html

TypeError: Cannot read property 'Scroll' of undefined

hello,
thanks for your post! but i have a problem my $scope.loadMore function only fire once when i get to the bottom of my list. please how can i do it for it to fire every time i scroll to the bottom

@rizqyhi items will be ordered in ascending order by default. One workaround, would be to add a field to the item and decrement its value on every insertion.
So for eg:
var scrollRef = new Firebase.util.Scroll(baseRef, 'orderId');

Here 'orderId' can be a field on your item. The first item has orderId of 1 or 1million (doesnt matter) and you decrement that value everytime you insert an item to the array. The result in your scroll view will be new items will always appear at the top of the list.

Where to get the firebase-util.min.js file in the ionic structure?