Question

我目前使用过滤器将ng-repeat限制为5，但我想知道如何对数据进行分页。

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

我有一个可变数量的项目，我正在重复，我希望用户能够以合理的块查看这些项目 - 一次五个，下一个/上一个按钮或页码到跳过。是否有适合此任务的角度指令？使用mongoose查询处理从后端发送可管理的数据块是否更简单？

Answer 1

是的，AngularJS名为dirPagination的指令很好。您可以对tables和几乎所有需要的内容进行分页。

在Github上查看，如果您想观看演示Plunker。

下载Javascript和模板Html文件后，您需要执行一些基本步骤：

在Javascript文件中，输入：

$scope.currentPage = 1; //应该开始分页的页面。
$scope.pageSize = 5; //每页的商品数量限制。
更改您的div：

<div ng-repeat="job in jobs | limitTo:5">至<div dir-paginate="job in jobs | filter:q | itemsPerPage: pageSize" current-page="currentPage"></div>
在html文件中添加分页控件（请务必为模板设置正确的URL）。

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

<强>更新

我制作了一个plnkr来展示你的情况。请看一看。

Answer 2

Angular做pagination的方法怎么样？

您可以使用内置的 - lightweight Angular/Bootstrap pagination。

在Javascript文件中：

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

在您看来：

<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>

在角度1中，我如何对ng-repeats进行分页？

2 个答案: