Шаблон Angular.ui Pagination - PullRequest
Новая
       14

Шаблон Angular.ui Pagination

0 голосов
/ 12 декабря 2018

Я использую AngularJS и Angular UI Bootstrap и пытаюсь оценить нумерацию страниц.

В документации сказано, что я могу переопределить шаблон для компонента с помощью пользовательского шаблона.

Однако я не знаю, как HTML-шаблон должен быть структурирован.Я попытался использовать пару шаблонов, которые я нашел, но ни один из них не сработал.

Мне нужно, чтобы нумерация страниц выглядела немного как это

Может кто-нибудь привести пример, как мне нужно написать этот шаблон?

Ответы [ 2 ]

0 голосов
/ 13 декабря 2018

Прежде всего вы можете переопределить шаблон по умолчанию, используя атрибут template-url и предоставив свой собственный шаблон

template-url (По умолчанию: uib / template / pagination / pagination.html) -Замените шаблон для компонента пользовательским шаблоном

Во-вторых, вы можете найти все шаблоны на странице Github (вы можете увидеть шаблон пагинации по умолчанию здесь ).Скопируйте его, измените его в соответствии с вашими потребностями и наведите на него templateUrl

0 голосов
/ 12 декабря 2018

Итак, вот пример: 

<code>  <div ng-controller="PaginationDemoCtrl">
    <table class="table">
      <tr ng-repeat="row in data.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage))">
        <td>{{row.name}}</td>
        <td>{{row.id}}</td>
      </tr>
    </table>
View <select ng-model="viewby" ng-change="setItemsPerPage(viewby)"><option>3</option><option>5</option><option>10</option><option>20</option><option>30</option><option>40</option><option>50</option></select> records at a time.

    <pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" max-size="2" class="pagination-sm" items-per-page="itemsPerPage"></pagination>
    <pre>The selected page no: {{currentPage}}
Установите текущую страницу на: 3

Сначала я изменил в ui.bootstrap.js слова «предыдущий» и «следующий» натолько для знаков > и <, также я добавил style.css, где я изменил цвета, я думаю, что моя нумерация страниц похожа на вашу картинку.Здесь вы можете увидеть все, и вы можете внести еще больше изменений, если хотите:

plunker: http://next.plnkr.co/edit/bFMHzgCjVwK4YNPG?preview

...