Pagination with AngularJS and your API

Submitted by michaeljcalkins - 4 years ago

In the background create your paginated response however you wish.

// 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>

Ads cover the costs of maintaining Laravel-tricks

comments powered by Disqus

Ads cover the costs of maintaining Laravel-tricks