如何使用 AngularJS 更改 Bootstrap UI 分页中的文本和样式?
How to change Text and Styles in Bootstrap UI Paging with AgnularJS?
我不知道如何在此处更改样式和默认文本。
这是 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;
嗨,我认为它有助于填写您的文本更改
<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>
要更改颜色,您可以使用 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>
我不知道如何在此处更改样式和默认文本。 这是 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;
嗨,我认为它有助于填写您的文本更改
<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>
要更改颜色,您可以使用 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>