如何使用 AngularJS 更改 Bootstrap UI 分页中的文本和样式？答案

【问题标题】：How to change Text and Styles in Bootstrap UI Paging with AgnularJS?如何使用 AngularJS 更改 Bootstrap UI 分页中的文本和样式？
【发布时间】：2018-02-14 01:58:44
【问题描述】：

我不知道如何在此处更改样式和默认文本。这是html：

 <pagination total-items="totalItems" ng-model="currentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages" items-per-page="itemsPerPage"></pagination>

这是 JS：

  $scope.totalItems = $scope.data.length;
  $scope.totalItems = $scope.data.length;
  $scope.currentPage = 4;
  $scope.itemsPerPage = $scope.viewby;
  $scope.maxSize = 5;

【问题讨论】：

欢迎来到 SO，您能否提供更多详细信息，例如您要更改的内容？或者代码的实际问题是什么？
问题是这个分页标签上的默认文本和默认 boostrap 样式。我找不到合适的方法来更改它:(
喜欢它有默认的蓝色，我希望它变成红色。与那里的文字相同。
使用 CSS ul.pagination li > a { color: red !important; } 请注意 !important 是覆盖该元素的所有其他样式（之前为蓝色）。
@Naren Murali 哇，谢谢，它成功了！也许您也知道如何更改文本？:)

标签： javascript angularjs twitter-bootstrap bootstrap-ui

【解决方案1】：

要更改颜色，您可以使用 CSS。

CSS：

ul.pagination li > a { color: red !important; }

要更改文本，您可以使用 UI-Bootstrap 的属性。

HTML：

<pagination first-text="Hello" previous-text="World" next-text="Good" 
 last-text="Day!"  total-items="totalItems" ng-model="currentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages" items-per-page="itemsPerPage"></pagination>

Plunkr Demo

【讨论】：

【解决方案2】：

嗨，我认为它可以帮助您完整地更改文本

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

【讨论】：