Angular.ui 分页模板

Question

我正在使用 AngularJS 和 Angular UI Bootstrap 并且我正在尝试对分页进行自定义。

文档上说我可以使用自定义提供的模板覆盖组件的模板。

但是我不知道 html 模板必须如何构建。我尝试使用我找到的几个模板，但 none 的模板非常有效。

我需要分页稍微好看一点like this

有人可以举例说明我需要如何编写这个模板吗？

Answer 1

因此，这里是示例：

  <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}}</pre>
    <button class="btn btn-info" ng-click="setPage(3)">Set current page to: 3</button>

首先，我将 ui.bootstrap.js 单词 "previous" 和 "next" 更改为仅用于符号 > 和 <，我还添加了 style.css 我改变颜色的地方，我认为我的分页看起来与您的图片相似。在这里您可以看到所有内容，如果您愿意，还可以进行更多更改：

笨蛋： http://next.plnkr.co/edit/bFMHzgCjVwK4YNPG?preview

Answer 2

首先，您可以使用 template-url 属性并提供您的自定义模板来覆盖默认模板

template-url (Default: uib/template/pagination/pagination.html) - Override the template for the component with a custom provided template

其次，您可以在Github页面中找到所有模板（您可以看到默认的分页模板here）。复制它，将其更改为您的需要并将 templateUrl 指向它

Angular.ui 分页模板

Angular.ui Pagination Template

pagination

angularjs

angular-ui-bootstrap

angular-ui-pagination