Angular JS 中的分页答案

【问题标题】：Paging in Angular JSAngular JS 中的分页
【发布时间】：2018-12-02 20:23:27
【问题描述】：

我正在使用 Angular 1 并使用 dir-paginate 控件进行分页。但需要在页面底部和顶部显示为 10|25|50|100|All 选项。我怎样才能做到这一点？

谢谢

<tr dir-paginate="r in model | orderBy: key : AscOrDesc |  filter : model | itemsPerPage: 25 ">

 <dir-pagination-controls max-size="25" direction-links="true" boundary-links="true" auto-hide="false"></dir-pagination-controls>

【问题讨论】：

标签： css angularjs pagination

【解决方案1】：

在控制器中为 itemsPerPage 创建一个范围变量并设置默认项目数

例如，

$scope.pageSize = 10; // default items per page

并将此范围变量分配给 itemsPerPage 过滤器，如下所示

`<tr dir-paginate="r in model | orderBy: key : AscOrDesc |  filter : model | itemsPerPage: pageSize ">`

 `<dir-pagination-controls max-size="25" direction-links="true" boundary-links="true" auto-hide="false"></dir-pagination-controls>`

您可以拥有选项链接列表，通过这些链接可以更新 itemsPerPage 值

`<div class="option-list">
   <a href="#" ng-click="pageSize=5">5</a>
   <a href="#" ng-click="pageSize=10">10</a>
   <a href="#" ng-click="pageSize=25">25</a>
   <a href="#" ng-click="pageSize=All">All</a>
</div>`

在这里找到工作代码 - http://plnkr.co/edit/peFiAzDKRKX5IKgHum5y?p=preview

【讨论】：