在 angular 1 中，如何对 ng-repeats 进行分页？

Question

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

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

我有可变数量的 ng-repeating 项目，我希望用户能够以合理的块查看这些项目——一次五个，使用 next/previous 按钮或要跳过的页码。是否有适合此任务的 angular 指令？使用猫鼬查询从后端发送可管理的数据块会更简单吗？

Answer 1

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

在Github and if you want to see a demo, 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>

在 angular 1 中，如何对 ng-repeats 进行分页？

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

mongoose

angularjs

ng-repeat