Как установить атрибуты «предыдущий текст» и «следующий текст» в качестве шаблона HTML в директиве начальной загрузки angular-ui

Я буду использовать http://angular-ui.github.io/bootstrap/#pagination. необходимо установить индикаторы «предыдущий», «следующий» в формате 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


pagination angularjs angular-ui-bootstrap angular-ui
person kriskodzi    schedule 30.12.2013    source источник
comment
Если вам нужно установить его как HTML, вы можете переопределить шаблон разбиения на страницы. См. stackoverflow.com/questions/17660947/   -  person pkozlowski.opensource    schedule 30.12.2013
comment
На самом деле это может быть ответ :)   -  person kriskodzi    schedule 09.01.2014

Ответы (4)


arrow_upward
8
arrow_downward

Этот ответ основан на комментарии @pkozlowski.opensource: добавьте тег script в свой 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>

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

person Meysam    schedule 24.08.2014
comment
У меня не работает (шаблон элемента ‹li› посередине с атрибутом ng-repeat применяется ко всему, включая направление и граничные ссылки). - person white_pawn; 11.01.2015

arrow_upward
11
arrow_downward

Я столкнулся с той же проблемой. Но разница в том, что я использую fontawesome. Здесь вы можете найти юникод для каждой иконки.

Обратите внимание, что пагинация теперь находится под тегом 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 со значками

person OlehZiniak    schedule 22.03.2016

arrow_upward
1
arrow_downward

Поместите это в свой контроллер

    $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>");
person dSorto    schedule 28.01.2015
comment
Это отлично сработало для меня. Я внедрил $templateCache в свой контроллер, а затем вставил этот блок внизу моего контроллера, используя свои собственные значки предыдущего и следующего - person molaro; 04.12.2019

arrow_upward
0
arrow_downward

Я столкнулся с аналогичной проблемой в ng-text-truncate. Там проблема заключалась в том, что параметр добавлялся как строка в html. Итак, я столкнулся с проблемами синтаксического анализа. Поэтому попробуйте исправить кавычки следующим образом:

<pagination 
    previous-text="<span class='glyphicon glyphicon-arrow-left'></span>"
    next-text="<span class='glyphicon glyphicon-arrow-right'></span>"
>
</pagination>
person Sahil Sharma    schedule 19.01.2016