Angular Bootstrap Pagination:将自定义类添加到导航按钮

时间:2015-03-25 02:18:58

标签: angularjs pagination angular-ui

我正在编辑应用程序的用户界面,有一个现有的分页设计。现在我想要的是改变分页的导航。

这是我的分页代码:

<div pagination="" total-items="merchandisesCount" page="currentPage" items-per-page="rowsPerPage" 
    max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages" 
    next-text="" previous-text="" first-text="" last-text=""></div>

当分页显示时,我想添加字体真棒雪佛龙左,右等用作我的导航。我该怎么做?

由于

1 个答案:

答案 0 :(得分:2)

我不知道您是否解决了问题,但我遇到了同样的问题并找到了另一个答案:How to set prevous-text and next-text attribute as HTML template in angular-ui bootstrap pagination directive

我使用了提供的解决方案,但它有一些问题所以我把它改为:

<pagination total-items="pagination.totalItems" items-per-page="pagination.itemsPerPage" page="pagination.currentPage" boundary-links="true" rotate="false" max-size="5" on-select-page="getAnnouncements(page)"></pagination>

<script id="template/pagination/pagination.html" type="text/ng-template">
    <ul class="pagination">
        <li ng-repeat="page in pages" ng-class="{active: page.active}">
            <a href data-ng-show="page.text  == 'Previous'" ng-click="selectPage(page.number)"> <i class="fa fa-chevron-left"></i> </a>
            <a href data-ng-show="page.text >= 1 || page.text == 'First' || page.text == 'Last'" ng-click="selectPage(page.number)">{{page.text}}</a>
            <a href data-ng-show="page.text == 'Next'" ng-click="selectPage(page.number)"> <i class="fa fa-chevron-right"></i> </a>
        </li>
    </ul>
</script>

我希望这会对你有所帮助。