Question

我将使用http://angular-ui.github.io/bootstrap/#pagination 我需要将'previous'，'next'指标设置为html。

类似的东西：

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

不幸的是，它返回解析的html而不是图标。

以下是我想要实现的内容：http://plnkr.co/edit/q59XhTO0II1ZBz21Etj2?p=preview

Answer 1

此答案基于@ pkozlowski.opensource评论：将脚本标记添加到您的html文件中，如下所示，然后您就可以了：

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

我修改了原始模板并用 glyphicons 替换了分页文本，并将标题添加到链接以进行自定义。

Answer 2

我遇到了同样的问题。但不同之处在于我使用fontawesome。 Here你可以找到每个图标的unicode。

请注意，分页现在位于uib-pagination

标记下

HTML文件

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

CSS文件

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

这里使用

Helvetica 来设置数字的字体。结果如下 angularjs pagination with icons

Answer 3

将其放入您的控制器

    $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>");

Answer 4

我在ng-text-truncate中遇到了类似的问题。问题是该参数被添加为html的字符串。所以我面临着解析问题。因此，请尝试更正以下引号：

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

如何在angular-ui bootstrap分页指令中将prevous-text和next-text属性设置为HTML模板

4 个答案: