Angular Simple Pagination
HTML
<div ng-controller="MyCtrl">
<!-- Repeat -->
<ul>
<li ng-repeat="item in data | startFrom:pagination.currentPage*pagination.pageSize | limitTo:pagination.pageSize">{{item}}</li>
</ul>
<!-- Page UI -->
<select ng-model="pagination.pageSize">
<option value="10">10</option>
<option value="25">25</option>
<option value="100">100</option>
</select>
<button ng-disabled="pagination.currentPage == 0" ng-click="pagination.currentPage=pagination.currentPage-1">Previous</button>{{pagination.currentPage+1}}/{{pagination.numberOfPages()}}
<button ng-disabled="pagination.currentPage >= data.length/pagination.pageSize - 1" ng-click="pagination.currentPage=pagination.currentPage+1">Next</button>
</div>
JavaScript
var app = angular.module('myApp', []);
function MyCtrl($scope) {
// Controller specific
$scope.data = [];
for (var i = 0; i < 45; i++) {
$scope.data.push("Item " + i);
}
// Scope specific but could be globally created
$scope.pagination = {
currentPage: 0,
pageSize: 10,
numberOfPages: function () {
return Math.ceil($scope.data.length / $scope.pagination.pageSize);
}
};
}
// We already have a limitTo filter built-in to angular,
// let's make a startFrom filter
app.filter('startFrom', function () {
if(typeof input === undefined){
return null;
}else{
return function (input, start) {
start = +start; //parse to int
return input.slice(start);
}
}
});