Dead simple paging for angular apps.

Install with bower:

bower install --save angular-ivh-pager

Add this module as a dependency to your app:

angular.module('myApp', ['ivh.pager']);

Now simply run your collection through the ivhPaginate filter and add the ivh-pager element to your page:

<!--
$scope = {
  bigCollection: [...],
  ixPage: 0
}
-->
<ul>
  <li ng-repeat="item in bigCollection | ivhPaginate:ixPage">
    <!-- item stuff -->
  </li>
</ul>

<!-- attribute form is fine too -->
<ivh-pager
    ivh-pager-page-number="ixPage"
    ivh-pager-total="bigCollection.length">
</ivh-pager>

You can also set custom page sizes:

<!--
$scope = {
  bigCollection: [...],
  sizeOfPage: 100,
  ixPage: 0
}
-->
<ul>
  <li ng-repeat="item in bigCollection | ivhPaginate:ixPage:sizeOfPage">
    <!-- item stuff -->
  </li>
</ul>

<!-- attribute form is fine too -->
<ivh-pager
    ivh-pager-page-number="ixPage"
    ivh-pager-page-size="sizeOfPage"
    ivh-pager-total="bigCollection.length">
</ivh-pager>

As well as button sizes:

<ivh-pager
    ivh-pager-page-number="ixPage"
    ivh-pager-button-size="'lg'" 
    ivh-pager-total="bigCollection.length">
</ivh-pager>

Button sizes can be one of 'lg', ''sm'or''` (the empty string) for the default button size.

IVH Pager provides a hook for user-driven page changes. Assign an angular expression to ivh-pager-on-page-change, you will have access to the variables newPage and oldPage corresponding to the new and old page indexes respectively.

Note that if you have your own variables bound to the pager page index the expression will be evaluated before AngularJS has a chance to update your bound variable. I.e. your variable will reflect oldPage rather than newPage.

<ivh-pager
    ivh-pager-page-number="ixPage"
    ivh-pager-button-size="'lg'" 
    ivh-pager-total="bigCollection.length"
    ivh-pager-on-page-change="myChangeHandler(newPage, oldPage)">
</ivh-pager>

Use npm test to run the full suite of linting, style checks, and unit tests.

Or, run each individually:

• Use grunt jshint for linting
• Use grunt jscs for coding style checks
• Use grunt jasmine to unit tests

For ease of development the grunt watch task will run each of the above as needed when you make changes to source files.

• 2015-10-28 v0.3.0 Add page change callbacks
• 2015-10-07 v0.1.0 Initial release

MIT