How to set prevous-text and next-text attribute as HTML template in angular-ui bootstrap pagination directive

Question

I'm going to use http://angular-ui.github.io/bootstrap/#pagination I need to set 'previous', 'next' indicators as html.

something like:

<pagination 
    previous-text="'<span class="glyphicon glyphicon-arrow-left"></span>'"
    next-text="'<span class="glyphicon glyphicon-arrow-right"></span>'"
>
</pagination>

Unfortunately it returns parsed html instead of icons.

Here is a plunker with what I want to achieve: http://plnkr.co/edit/q59XhTO0II1ZBz21Etj2?p=preview

If you need to set it as HTML you can override the pagination template. See http://stackoverflow.com/questions/17660947/can-you-override-specific-templates-in-angularui-bootstrap/17677437#17677437 — pkozlowski.opensource, Dec 30 '13 at 17:07

score 11 · Answer 1 · answered Mar 22 '16 at 21:08

I faced the same problem. But the difference is that I use fontawesome. Here you can find unicode for every icon.

Please note that the pagination is now under the tag uib-pagination

HTML file

<uib-pagination class="my-pagination"
                ...
                first-text="&#xf049;"
                previous-text="&#xf048;"
                next-text="&#xf051;"
                last-text="&#xf050;">
</uib-pagination>

CSS file

.my-pagination {
    font-family: Helvetica, FontAwesome;
}

Helvetica is used here to set the font of the numbers. The result is following angularjs pagination with icons

score 8 · Accepted Answer · edited Jul 31 '17 at 16:14

This answer is based on @pkozlowski.opensource comment: add a script tag to your html file like following and then your are good to go:

<script id="template/pagination/pagination.html" type="text/ng-template">
<ul class="pagination">
    <li ng-if="boundaryLinks" ng-class="{disabled: noPrevious()}">
        <a href ng-click="selectPage(1)" title="First Page"> 
            <span class="glyphicon glyphicon-fast-backward"></span>
        </a>
    </li>
    <li ng-if="directionLinks" ng-class="{disabled: noPrevious()}">
        <a href ng-click="selectPage(page - 1)" title="Previous Page">
          <span class="glyphicon glyphicon-step-backward"></span>
        </a>
    </li>
    <li ng-repeat="page in pages track by $index" ng-class="{active: page.active}">
      <a href ng-click="selectPage(page.number)">{{page.text}}</a>
    </li>
    <li ng-if="directionLinks" ng-class="{disabled: noNext()}">
      <a href ng-click="selectPage(page + 1)" title="Next Page">
        <span class="glyphicon glyphicon-step-forward"></span>
      </a>
   </li>
   <li ng-if="boundaryLinks" ng-class="{disabled: noNext()}">
     <a href ng-click="selectPage(totalPages)" title="Last Page">
       <span class="glyphicon glyphicon-fast-forward"></span>
     </a>
   </li>
</ul>

I modified original template and replaced pagination texts with glyphicons and added title to links for customization.

dSorto · Answer 3 · 2015-01-28T23:04:55.947

Put this in your controller

    $templateCache.put('template/pagination/pagination.html',
            "<ul class=\"pagination\">\n" +
            "  <li ng-if=\"boundaryLinks\" ng-class=\"{disabled: noPrevious()}\"><a href ng-click=\"selectPage(1)\"><span class=\"glyphicon glyphicon-fast-backward\"></span></a></li>\n" +
            "  <li ng-if=\"directionLinks\" ng-class=\"{disabled: noPrevious()}\"><a href ng-click=\"selectPage(page - 1)\"><span class=\"glyphicon glyphicon-triangle-left\"></span></a></li>\n" +
            "  <li ng-repeat=\"page in pages track by $index\" ng-class=\"{active: page.active}\"><a href ng-click=\"selectPage(page.number)\">{{page.text}}</a></li>\n" +
            "  <li ng-if=\"directionLinks\" ng-class=\"{disabled: noNext()}\"><a href ng-click=\"selectPage(page + 1)\"><span class=\"glyphicon glyphicon-triangle-right\"></span></a></li>\n" +
            "  <li ng-if=\"boundaryLinks\" ng-class=\"{disabled: noNext()}\"><a href ng-click=\"selectPage(totalPages)\"><span class=\"glyphicon glyphicon-fast-forward\"></span></a></li>\n" +
            "</ul>");

This worked great for me. I injected $templateCache in my controller, then pasted this block at the bottom of my controller, using my own custom previous and next icons — molaro, Dec 03 '19 at 22:03

score 0 · Answer 4 · answered Jan 19 '16 at 08:38

I faced a similar issue in ng-text-truncate. There the problem was that the parameter was being added as a string to the html. SO I was facing the parsing issues. So try correcting the quotes as following :

<pagination 
    previous-text="<span class='glyphicon glyphicon-arrow-left'></span>"
    next-text="<span class='glyphicon glyphicon-arrow-right'></span>"
>
</pagination>

How to set prevous-text and next-text attribute as HTML template in angular-ui bootstrap pagination directive

4 Answers4

Linked