Question

我正在使用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>

Answer 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

在Angular JS中分页

1 个答案: