Search This Blog

Friday, May 27, 2016

Pagination with AngularJS and your API

// main.js (function() { 'use strict'; angular.module('app') .controller('MainCtrl', ['$scope', '$http', function($scope, $http) { $scope.main = { page: 1, take: 15 }; $scope.loadPage = function() { // You could use Restangular here with a route resource. $http.get('api/v2/users?page=' + main.page + '&take=' + main.take).success(function(data){ // users from your api $scope.main.users = data.users; // number of pages of users $socpe.main.pages = data.pages; }); }; $scope.nextPage = function() { if ($scope.main.page < $scope.main.pages) { $scope.main.page++; $scope.loadPage(); } }; $scope.previousPage = function() { if ($scope.main.page > 1) { $scope.main.page--; $scope.loadPage(); } }; }]); }); // main.tpl.html <ul> <li ng-repeat='user in users'>{{ user.email }}</li> </ul> <button ng-click='previousPage()'>Previous<button> <button ng-click='nextPage()'>Next<button>

No comments:

Post a Comment