In angular 1, how can I paginate my ng-repeats?

Question

I am currently limiting my ng-repeat to 5 using a filter, but I'm wondering how I can paginate the data.

<div ng-repeat="job in jobs | limitTo:5">

I have a variable number of items that I am ng-repeating through, and I would like the user to be able to view these items in reasonable chunks -- five at a time, with next/previous buttons or page numbers to skip through. Is there an angular directive well-suited for this task? Would it be simpler to handle sending manageable chunks of data from the backend with a mongoose query?

Answer 1

How about Angular way of doing pagination?

You can just use the built in - lightweight Angular/Bootstrap pagination.

1. In your Javascript file:

   angular.module('ui.bootstrap.demo').controller('PaginationDemoCtrl', function ($scope, $log) {
      $scope.totalItems = 64;
      $scope.currentPage = 4;
      $scope.setPage = function (pageNo) {
         $scope.currentPage = pageNo;
      };
      $scope.pageChanged = function() {
         $log.log('Page changed to: ' + $scope.currentPage);
      };
      $scope.maxSize = 5;
      $scope.bigTotalItems = 175;
      $scope.bigCurrentPage = 1;
   });
   

2. In your view:

   <div ng-controller="PaginationDemoCtrl">
      <h4>Default</h4>
      <uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></uib-pagination>
      <uib-pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></uib-pagination>
      <uib-pagination direction-links="false" boundary-links="true" total-items="totalItems" ng-model="currentPage"></uib-pagination>
      <uib-pagination direction-links="false" total-items="totalItems" ng-model="currentPage" num-pages="smallnumPages"></uib-pagination>
      <pre>The selected page no: {{currentPage}}</pre>
      <button type="button" class="btn btn-info" ng-click="setPage(3)">Set current page to: 3</button>
   
      <hr />
   
      <h4>Limit the maximum visible buttons</h4>
      <h6><code>rotate</code> defaulted to <code>true</code>:</h6>
      <uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" num-pages="numPages"></uib-pagination>
      <h6><code>rotate</code> defaulted to <code>true</code> and <code>force-ellipses</code> set to <code>true</code>:</h6>
      <uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" force-ellipses="true"></uib-pagination>
      <h6><code>rotate</code> set to <code>false</code>:</h6>
      <uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false"></uib-pagination>
      <h6><code>boundary-link-numbers</code> set to <code>true</code> and <code>rotate</code> defaulted to <code>true</code>:</h6>
      <uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-link-numbers="true"></uib-pagination>
      <h6><code>boundary-link-numbers</code> set to <code>true</code> and <code>rotate</code> set to <code>false</code>:</h6>
      <uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-link-numbers="true" rotate="false"></uib-pagination>
      <pre>Page: {{bigCurrentPage}} / {{numPages}}</pre>
   </div>
   

Answer 2

Yes, there's a nice directive for AngularJS called dirPagination. You can paginate tables and almost everything that you need.

Look at it on Github and if you want to see a demo, Plunker.

After you downloaded the Javascript and template Html files, you need to do some basic steps:

1. In your Javascript file, put:

   $scope.currentPage = 1; // The page that should start the pagination.
   $scope.pageSize = 5; // The limit of items per page.

2. Change your div:

   <div ng-repeat="job in jobs | limitTo:5"> to <div dir-paginate="job in jobs | filter:q | itemsPerPage: pageSize" current-page="currentPage"></div>

3. Add the pagination controls in your html file (Be sure to set the correct url for the template).

   <dir-pagination-controls boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)" template-url="dirPagination.tpl.html"></dir-pagination-controls>

UPDATE

I made a plnkr to demonstrate how it would look in your case. Please, take a look.