How to add style to a dir-paginate

Question

I am new to angular js. I want to know how to apply style on a pagination box. The code below provides the rectangular box view. `

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

I want to have the style below.

Inspected Element

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

How can I add the above style in the angular pagination? https://i.stack.imgur.com/jEq3R.png

[duplicate](https://stackoverflow.com/questions/39102085/pagination-style-in-angular-js)? — Jean-Philippe Bergeron, Dec 17 '18 at 21:42
It´s not duplicate at all because the answer is not complete and the answer is not resolved. Regards — M.Parra, Dec 17 '18 at 22:09

score 0 · Answer 1 · answered Dec 20 '18 at 03:36

I resolve the problem including a template into my dir-pagination-tools an adding my style for my company and works excelent.!

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

Regards

How to add style to a dir-paginate

1 Answers1