Skip to content

Instantly share code, notes, and snippets.

@katowulf
Last active April 12, 2017 14:12
Show Gist options
  • Save katowulf/7adb5775dce44cbbba0a to your computer and use it in GitHub Desktop.
Save katowulf/7adb5775dce44cbbba0a to your computer and use it in GitHub Desktop.
Example of infinite scroll in Ionic with Firebase (utilizes Firebase.util.Scroll; http://firebase.github.io/firebase-util/)
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');
};
});
<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>
@marcusdurao
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment