As a newcomer to AngularJS, I'm interested in learning how to apply styling to a pagination box. Below is the code for displaying a rectangular box view: `
<dir-pagination-controls
max- size = "10"
direction-links = "true"
boundary-links = "true"
class="ml-pagination-numbers" >
I would like to achieve the following style:
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 && 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 && 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 implement the above style for the Angular pagination? https://i.sstatic.net/jEq3R.png