Angular.js Pagination with Bootstrap
This post introduces how to make a pagination component with Angular.js and Bootstrap.
The following shows an expected state of our pagination component.
which could be modeled into
The left part is for the starting pages, right for ending pages, and center for pages around current one.
For example, for the second page,
page - 1 is the same as
page is the same as
2, so we need to hide
... in the left part.
In fact, this task is more difficult than one might imagine, since there are many possible situations of our pagination. And this post is going to talk about how to make it.
In Angular controller, we define the page data, which could be replaced by backend data.
In HTML, we use
ng-if to hide unnecessary tags, and
ng-class to add class conditionally.
abcd..g at the end for you to understand better.
Here is the pagination for varied pages.
View All Posts
comments powered by