Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
<div paginate="items">
<ul>
<li ng-repeat="item in pager.paged">
{{item.index}} {{item.text}}
</li>
</ul>
<button ng-click="pager.previous()">Previous</button>
<span ng-repeat="page in pager.pages"
ng-class="pager.classForPage(page)">
<a ng-click="pager.goTo(page)">{{page}}</a>
</span>
<button ng-click="pager.next()">Next</button>
</div>
</div>
CSS
.active {
font-weight: bold;
font-size: 18px;
}
a {
text-decoration: none;
}
JavaScript
var myApp = angular.module('myApp', []);
myApp.directive('paginate', function () {
return function ($scope, $element, $attrs) {
var Pager, getList, pager;
getList = function () {
return $scope.$eval($attrs.paginate);
};
Pager = function (scope, element, attrs) {
var calculateCurrentPage, calculatePages, changePagedContentToMatchPage, currentPageIndexes, list, pageSize, self;
pageSize = 5;
list = scope.$eval(attrs.paginate) || [];
self = this;
this.pages = [];
this.currentPage = 1;
this.paged = [];
calculatePages = function () {
var pagesCount, _i, _results;
if (list.length > 0) {
pagesCount = Math.floor((list.length - 1) / pageSize) + 1;
if (pagesCount !== self.pages.length) {
self.pages = (function () {
_results = [];
for (var _i = 1; 1 <= pagesCount ? _i <= pagesCount : _i >= pagesCount; 1 <= pagesCount ? _i++ : _i--) {
_results.push(_i);
}
return _results;
}).apply(this);
}
} else {
if (self.pages.length !== 0) {
self.pages = [];
}
}
};
calculateCurrentPage = function () {
if (self.currentPage > self.pages.length) {
self.currentPage = 1;
}
};
currentPageIndexes = function () {
var _i, _ref, _ref1, _results;
return (function () {
_results = [];
for (var _i = _ref = (self.currentPage - 1) * pageSize, _ref1 = Math.min(self.currentPage * pageSize, list.length); _ref <= _ref1 ? _i...