Ajouter un bouton « Montrer les 25 prochains objets » avec Firebase.

Introduction


Il existe une lib pour gérer la pagination avec Firebase sous Angular 1.0:

http://firebase.github.io/firebase-util/#/

 

Exemple fonctionnel (Cliquer ici pour tester):


Index.html :


<!DOCTYPE html>
<html  class="" lang="en">
	<head>

		<!-- CHARGEMENT DES LIBRAIRIES -->

				<!-- CHARGEMENT LIB ANGULAR -->
				<script type="text/javascript" src="librairies/angular-1.3.13/angular.min.js"></script>

				<!-- AngularFire pour firebase-->
				<script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script>

				<!-- Firebase Utils -->
				<script src="https://cdn.firebase.com/js/client/2.2.9/firebase.js"></script>
				<script src="https://cdn.firebase.com/libs/firebase-util/0.2.5/firebase-util.min.js"></script>
				<script>
					Firebase.util.logLevel('log');
					Firebase.util.log('hello world');
				</script>

				<!-- Le CONTROLEUR -->
				<script src="controleurs/app.js"></script>
	</head>

	<body ng-app="app" ng-controller="ctrl">
<h4>Items loaded: {{scrollItems.length}}</h4>
<button class="btn btn-primary" 			  ng-click="scrollItems.scroll.next(25)" 			  ng-disabled="!scrollItems.scroll.hasNext()">
			  Load Next 25
		  </button>
<ul class="scrollbox" scroll-to-bottom="scrollItems">
	<li ng-repeat="item in scrollItems">{{item.$id}}: {{item.nom}}</li>
</ul>
</body>
</html>

app.js

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

app.controller('ctrl', ['$scope', '$firebaseArray', '$scrollArray',
  function($scope, $firebaseArray, $scrollArray) {
    var servicesRef = new Firebase('https://fbutil.firebaseio.com/paginate');
    $scope.scrollItems = $scrollArray(servicesRef, 'number');
}])

app.factory('$scrollArray', ['$firebaseArray', function($firebaseArray) {
  return function(ref, field) {
    var scrollRef = new Firebase.util.Scroll(ref, field);
    var list = $firebaseArray(scrollRef);
    list.scroll = scrollRef.scroll;

    return list;
  }
}])

// just some scroll magic to show the bottom of the list as new records are loaded
app.directive('scrollToBottom', function () {
  var unbind;
  return {
    restrict: 'A',
    scope: { scrollToBottom: "=" },
    link: function (scope, element) {
      if( unbind ) { unbind(); }
      unbind = scope.$watchCollection('scrollToBottom', function () {
        // assumes we have jQuery, which handles the pretty animation
        // otherwise, just use this code instead:
        element[0].scrollTop = element[0].scrollHeight;
        $(element).animate({scrollTop: element[0].scrollHeight});
      });
    }
  }
});

 

 

 

Publicités