首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Angular.ui分页模板

Angular.ui分页模板
EN

Stack Overflow用户
提问于 2018-12-13 03:34:42
回答 1查看 727关注 0票数 2

我正在使用AngularJS和Angular UI Bootstrap,并且我正在尝试将分页进行风俗化。

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

然而,我不知道html模板必须如何构造。我试着使用了几个我找到的模板,但是没有一个能很好的工作。

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

有人能举例说明我需要如何写这个模板吗?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-12-13 04:21:01

所以,下面是一个例子:

  <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>

首先,我把“上一页”和“下一页”这两个单词改成了><的标志,还在改了颜色的地方加上了style.css,我觉得我的分页看起来和你的图片很像。在这里,您可以看到所有内容,如果需要,还可以进行更多更改:

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53750172

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档