使用 uib-pagination 在活动页面之前更改分页颜色答案

【问题标题】：Alter pagination colors before active page with uib-pagination使用 uib-pagination 在活动页面之前更改分页颜色
【发布时间】：2016-04-20 08:58:14
【问题描述】：

我正在尝试实现在活动页面之前/之后显示不同颜色的分页控件，如下所示： pagination control

我正在使用带有自定义分页模板的 uib-pagination，如下所示：

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

页面对象为：{"number": 1, "text": 1, "active": false}

我不知道如何判断一个页面是在活动页面之前还是之后，以便向它添加不同的类。我可以在控制器中轻松做到这一点，但由于这是由 UI-Bootstrap 生成的，我不确定它将使用什么控制器或将逻辑放在哪里。我也想不出只使用模板中的指令来做到这一点的方法。有什么想法吗？

【问题讨论】：

标签： angularjs pagination angular-ui-bootstrap

【解决方案1】：

我通过使用 Angular 构建自己的分页控件解决了这个问题。我检查了当前页面的值以添加我的类。

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

角码很简单：

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

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

注意：导航页面是通过上一页/下一页页面按钮而不是分页显示发生的。

【讨论】：