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

Posted 2023-03-11

【中文标题】在角度 1 中，如何对我的 ng-repeats 进行分页？

【英文标题】：In angular 1, how can I paginate my ng-repeats?

【发布时间】：2016-06-13 07:26:49

【问题描述】：

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

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

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

【问题讨论】：

如果项目可以超过 1000，您将需要后端支持，否则 Angular 将开始爬行。

一个提示是确保客户端收到的结果永远不会超过他们可以在屏幕上显示的结果，从而实现最大的网络效率。一种典型的方法是解释诸如/results?p=4&l=10 之类的url，其中p 是您所在的页码，l 是限制发送回客户端的结果数。您应该直接在 SQL 查询或您的数据提供者上执行分页和限制。

【参考方案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 来演示它在您的情况下的外观。请看一下。

【参考方案2】：

Angularpagination 的做法怎么样？

您可以只使用内置的 - 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>