Pagination with AngularJS and your API
Submitted by michaeljcalkins - 10 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>
Stats
-
23 likes
- 47021 views