Question

我正在使用AngularJS和Angular UI Bootstrap，并且正在尝试分页。

在文档中，据说我可以使用自定义提供的模板覆盖该组件的模板。

但是，我不知道html模板的结构。我尝试使用发现的几个模板，但没有一个完全可行。

我需要使分页看起来有点like this

有人可以举例说明我该如何编写此模板吗？

Answer 1

首先，您可以使用{{1}}属性并提供自定义模板来覆盖默认模板

template-url（默认：uib / template / pagination / pagination.html）-使用自定义提供的模板覆盖组件的模板

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

Answer 2

所以，这是示例：

  <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单词“上一个”和“下一个”更改为仅用于符号>和<，还添加了style.css来更改颜色，我认为我的分页看起来与您的照片相似。在这里您可以看到所有内容，并且可以根据需要进行更多更改：

朋克： http://next.plnkr.co/edit/bFMHzgCjVwK4YNPG?preview

Angular.ui分页模板

2 个答案: