After serveral angular projects, I found out it’s really helpful to warp the pagination logic into directive. Make it open source and release on github. Feel free to use. :)

github
live demo

How to Use

  1. Declare paginator directive in your module.
1
2
3
angular.module('app',[])
.directive('paginator',Paginator);
function Paginator(){ ... }
  1. Declare startFrom filter in your module.
1
2
.filter('startFrom',startFrom)
function startFrom() { ... }
  1. In controller, create model for binding. (data, curPage, pageSize, pagerSize)
1
2
3
4
5
// use controller as viewmodel or old fashion $scope for view
this.data = data; // array of data
this.curPage = 1; // current page. External function can change page with this
this.pageSize = 10; // how many items per page
this.pagerSize = 5; // how many pagers in paginator (odd number recommended)
  1. Create remote template for paginator (Customize for your own need)
1
2
3
<button ng-disabled="curPage == 1" ng-click="prev()">Prev</button>
<button ng-repeat="p in pagers()" ng-disabled="this.p == curPage" ng-click="goPage(this.p)">{{p}}</button>
<button ng-disabled="curPage >= maxPage()" ng-click="next()">Next</button>
  1. In html view, you can use directive in controller scope like this.
1
2
3
4
5
6
7
8
9
10
// element style
<paginator data="main.data" cur-page="main.curPage" page-size="main.pageSize" pager-size="main.pagerSize"></paginator>

// ngRepeat for each page (where startFrom filter kickin)
<ul>
<li ng-repeat="p in main.data | startFrom:(main.curPage-1)*main.pageSize | limitTo:main.pageSize">{{p.name}} - {{p.email}}</li>
</ul>

// Attribute style
<div data="main.data" cur-page="main.curPage" page-size="main.pageSize" pager-size="main.pagerSize" paginator></div>

for detail, check out the example code.

License

The MIT License (MIT)