How to do paging in AngularJS?

Question

I have a dataset of about 1000 items in-memory and am attempting to create a pager for this dataset, but I\'m not sure on how to do this.

I\'m using a custom filter

Answer 1

I've had to implement pagination quite a few times with Angular, and it was always a bit of a pain for something that I felt could be simplified. I've used some of the ideas presented here and elsewhere to make a pagination module that makes pagination as simple as:

    
{{ item }}


// then somewhere else on the page ....

That's it. It has the following features:

• No custom code needed in your controller to tie the collection items to the pagination links.
• You aren't bound to using a table or gridview - you can paginate anything you can ng-repeat!
• Delegates to ng-repeat, so you can use any expression that could be validly used in an ng-repeat, including filtering, ordering etc.
• Works across controllers - the pagination-controls directive does not need to know anything about the context in which the paginate directive is called.

Demo : http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview

For those who are looking for a "plug and play" solution, I think you'll find this useful.

Code

The code is available here on GitHub and includes a pretty good set of tests:

https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

If you are interested I also wrote a short piece with a little more insight into the design of the module: http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs/