Step 4 : Using Pagination

Did you noticed that the search results count never exceeded more than 10?

This is because we limited the number of results to be shown using limitTo filter. In views/listEntries.html we have

<tr class="info" ng-repeat="item in listData | limitTo:10">

Thus, no matter how much results are stored in listData array, ng-repeat only generated 10 rows from the array.

Want to learn more about filter. Check the Filter API docs.

Wouldn't it be great if we could show all the records fetched from server and had a way to paginate between the records?

Time to move on next level. Move to Depth-4 by running below command:

git checkout depth4

##What's new in this level##

• Added a new file named ui-bootstrap-tpls-0.12.1.min.js inside js folder.
• Included this new file in our index.html.
• Added dependency of ui.bootstrap module to our application module in app.js.
• Added a new controller named PaginatorController to our appControllers module.
• Added a new div that contains pagination element inside views/listEntries.html.

Whoa!! Let's go step-by-step and understand the changes made.

a) To support pagination in our application, decided to use ui.bootstrap module, provided by BootstrapUI. There are other alternatives as well that could have been used. However, BootstrapUI provides components written purely in AngularJS and hence gets an upper edge over others.

b) Included the ui-bootstrap-tpls-0.12.1.min.js file in our index.html. This js file contains ui.bootstrap module.

c) Injected ui.bootstrap module as a dependency in our application module bloodBankApp.

d) Now we are ready to introduce pagination to our app. Observe the code in views/listEntries.html. The ui.bootstrap module provides a directive named pagination that we can use as an element. We wrapped the pagination element in a div for styling purpose.

Notice that we longer have a filter limitTo applied on our ng-repeat element. Also, we added a container div to make sure the results table and pagination links do not appear when there are no records to show.

e) We have created a new controller named PaginatorController in appControllers module and attached it to pagination element.