Question

我是angular js的新手。我想知道如何在分页框上应用样式。下面的代码提供了矩形框视图。 `

<dir-pagination-controls 
            max- size = "10"
            direction-links = "true"
            boundary-links = "true"
            class="ml-pagination-numbers" >

我想要下面的样式。

检查元素

    <ul class="pagination ng-scope" ng-if="1 < pages.length || !autoHide">
  <!-- ngIf: boundaryLinks -->
  <li ng-if="boundaryLinks" ng-class="{ disabled : pagination.current == 1 }" class="ng-scope disabled"><a href="" ng-click="setCurrent(1)">«</a></li>
  <!-- end ngIf: boundaryLinks -->
  <!-- ngIf: directionLinks -->
  <li ng-if="directionLinks" ng-class="{ disabled : pagination.current == 1 }" class="ng-scope disabled"><a href="" ng-click="setCurrent(pagination.current - 1)">‹</a></li>
  <!-- end ngIf: directionLinks -->
  <!-- ngRepeat: pageNumber in pages track by tracker(pageNumber, $index) -->
  <li ng-repeat="pageNumber in pages track by tracker(pageNumber, $index)" ng-class="{ active : pagination.current == pageNumber, disabled : pageNumber == '...' || ( ! autoHide &amp;&amp; pages.length === 1 ) }" class="ng-scope active"><a href="" ng-click="setCurrent(pageNumber)" class="ng-binding">1</a></li>
  <!-- end ngRepeat: pageNumber in pages track by tracker(pageNumber, $index) -->
  <li ng-repeat="pageNumber in pages track by tracker(pageNumber, $index)" ng-class="{ active : pagination.current == pageNumber, disabled : pageNumber == '...' || ( ! autoHide &amp;&amp; pages.length === 1 ) }" class="ng-scope"><a href="" ng-click="setCurrent(pageNumber)" class="ng-binding">2</a></li>
  <!-- end ngRepeat: pageNumber in pages track by tracker(pageNumber, $index) -->
  <!-- ngIf: directionLinks -->
  <li ng-if="directionLinks" ng-class="{ disabled : pagination.current == pagination.last }" class="ng-scope"><a href="" ng-click="setCurrent(pagination.current + 1)">›</a></li>
  <!-- end ngIf: directionLinks -->
  <!-- ngIf: boundaryLinks -->
  <li ng-if="boundaryLinks" ng-class="{ disabled : pagination.current == pagination.last }" class="ng-scope"><a href="" ng-click="setCurrent(pagination.last)">»</a></li>
  <!-- end ngIf: boundaryLinks -->
</ul>

如何在角度分页中添加上述样式？ https://i.stack.imgur.com/jEq3R.png

Answer 1

我解决了这个问题，其中包括在dir-pagination-tools中的模板，这为我的公司增添了我的风格，并且效果很好。

<link rel="stylesheet" href="../resources/css/pagination.css"><div class="ml-pagination-numbers" ng-if="pageNumber>1"ng-disabled="pagination.current == 1" ng-click="setCurrent(1)">1</div><div class="ml-pagination-numbers pg-back" ng-if="pageNumber<7"ng-disabled="pagination.current == 1"ng-click="setCurrent(pagination.current - 1)">&lsaquo;...</div>
<div class="ml-pagination-numbers"ng-repeat="pageNumber in pages track by tracker(pageNumber, $index)"ng-click="setCurrent(pageNumber)"ng-class="{ 'ml-current-page' : pagination.current == pageNumber}">{{pageNumber}}</div>
<div class="ml-pagination-numbers pg-next"ng-if="pageNumber>6" ng-disabled=" pagination.current == pagination.last" ng-click="setCurrent(pagination.current + 1)">...&rsaquo;</div>

致谢

如何为目录分页添加样式

1 个答案: