Пейджинг в Angular JS

Question

Я использую Angular 1 и использую dir-paginate control для пейджинга.Но нужно показать как 10 | 25 | 50 | 100 | Все опции внизу и вверху страницы.Как мне этого добиться?

Спасибо

<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