Question

我正在尝试实现一个分页控件，在活动页面之前/之后显示不同的颜色，如下所示： 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生成的，因此我不确定它将使用什么控制器或将逻辑放在何处。我也想不出用模板中的指令来做这个的方法。有什么想法吗？

Answer 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);
}

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

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

1 个答案: