CODEWITHSUNDEEP
angularjspaginationangular-ui-bootstrap
holly_whitney
holly_whitney

Reputation: 121

Alter pagination colors before active page with uib-pagination

I am trying to achieve a pagination control that shows different colors before/after the active page as such: pagination control

I'm using uib-pagination with a custom pagination template as follows:

<ul class="pagination">

<li ng-repeat="page in pages track by $index" ng-class="{active: page.active, disabled: ngDisabled&&!page.active}" class="pagination-page">
    <a href ng-click="selectPage(page.number, $event)" name="{{ page }}"></a>
</li>

</ul>

The page object is: {"number": 1, "text": 1, "active": false}

I can't figure out how to tell if a page is before or after the active page to add different classes to it. I could easily do this in a controller but since this is generated by UI-Bootstrap, I'm not sure what controller it would be using or where to put the logic. I also can't think of a way to do this just with directives within the template. Any ideas?

Upvotes: 0

Views: 702

Answers (1)

holly_whitney
holly_whitney

Reputation: 121

I solved this by building my own pagination control using Angular. I checked values against the current page to add my classes.

<ul class="pagination">
    <li ng-repeat="i in getNumber() track by $index" ng-class="{active: ($index + 1) === currentPage, complete: ($index + 1) < currentPage, future: ($index + 1) > currentPage }" class="pagination-page">
    </li>
</ul>

The angular code is very simple:

$scope.totalItems = $scope.questions.length;
$scope.currentPage = 1;

$scope.getNumber = function() {
    return new Array($scope.totalItems);
}

Note: navigating pages happens through previous/next pager buttons and not the pagination display.

Upvotes: 0

Related Questions