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

问题

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?

回答1:

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:

In your Javascript file, put:

$scope.currentPage = 1; // The page that should start the pagination.
$scope.pageSize = 5; // The limit of items per page.
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>
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.

回答2:

How about Angular way of doing pagination?

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

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;
});

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>

来源：https://stackoverflow.com/questions/35713412/in-angular-1-how-can-i-paginate-my-ng-repeats

标签

angularjs

mongoose

ng-repeat