Angular Bootstrap Pagination : Add custom class to navigation buttons

Question

I am editing a user interface of an application, there is an existing design for the pagination. Now what I want is to change the navigation of the pagination.

This is my pagination code:

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

When the pagination show, I want to add the font awesome chevron left, right etc. to be used as my navigation. How can I do it?

Thanks

Community · Accepted Answer · 2017-05-23 10:26:40Z

I don't know if you solved your problem, but I had the same issue and found this other answer : How to set prevous-text and next-text attribute as HTML template in angular-ui bootstrap pagination directive

I used the solution provided but it had some problem with it so I changed it to :

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

I hope this will help you.

Collectives™ on Stack Overflow

Angular Bootstrap Pagination : Add custom class to navigation buttons

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related