Skip to content

Instantly share code, notes, and snippets.

@katowulf

katowulf/app.js Secret

Created March 21, 2015 15:28
Show Gist options
  • Save katowulf/dd354f1f236e3086f61f to your computer and use it in GitHub Desktop.
Save katowulf/dd354f1f236e3086f61f to your computer and use it in GitHub Desktop.
Download ZIP
Example of Infinite scroll in Angular using ngInfiniteScroll and Firebase (uses http://firebase.github.io/firebase-util/)
Raw
app.js
var app = angular.module('app', ['firebase', 'infinite-scroll']);
app.controller('ctrl', function($scope, $firebaseArray) {
$scope.world = 'world';
var baseRef = new Firebase('https://fbutil.firebaseio.com/paginate');
var scrollRef = new Firebase.util.Scroll(baseRef, 'number');
$scope.items = $firebaseArray(scrollRef);
$scope.items.scroll = scrollRef.scroll;
});
Raw
index.html
<body ng-app="app" ng-controller="ctrl">
<h2>Hello {{world}}!</h2>
<div infinite-scroll="items.scroll.next(10)" infinite-scroll-distance="1">
<div ng-repeat="item in items">
{{item.$id}}: {{item.number}}, {{item.string}}
</div>
</div>
</body>
@henry74
Copy link

henry74 commented Mar 31, 2015

How would bring the data back in reverse chronological order? Can't seem to use limitToLast on the ref...

@henry74
Copy link

henry74 commented Mar 31, 2015

Never mind - figured it out by using $priority and passing that in as the orderBy field

@hiddendragonXVII
Copy link

@henry74 could you provide an example?, I'm trying to do the same thing.

@cameronbourke
Copy link

@henry74 an example would be awesome!

@henry74
Copy link

henry74 commented Aug 23, 2015

Don't use $priority as that is going away. Instead add a new field createdAtDesc and set it to 0 - Date.now() to create a negative number which can be used for reverse chronological order. Hope that helps - sorry didn't see these comments sooner.

{
  createdAt: Firebase.ServerValue.TIMESTAMP,
  createdAtDesc: 0 - Date.now()
}

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