Question

我想创建一个分页控件，向用户显示他们所在的页面。我在使用ng-class正确设置页面链接样式时遇到了麻烦。

获取数据后，我将$ scope.pages设置为[0,1,2..n]，其中n是count / itemsPerPage。 html看起来像这样......

<ul class="pagination">
    <li ng-click="prevPage()"><a>«</a></li>
    <li ng-repeat="page in pages"
        ng-class="(page==$index)? 'active' : ''"
        ng-click="selectedPage(page)"><a>{{page+1}}</a></li>
    <li ng-click="nextPage()"><a>»</a></li>
</ul>

但是这个标记导致所有<li>获得活动类。我可以通过调试看到$ index正在推进，我可以看到该页面是预期的值（我也可以看到当我硬编码时样式看起来正确），所以为什么没有＆＃39 ;条件样式的工作如上所述吗？

提前致谢。

Answer 1

您不应该针对$index评估表达式。如果你桌面检查每次迭代的重复循环，这就是你正在评估的内容：

page     $index
0    ==  0      // true
1    ==  1      // true
2    ==  2      // true

相反，您应该做的是向跟踪当前页面的范围添加单独的变量，如果您还没有。为了便于说明，我们将其称为currentPage。然后，您可以将表达式更改为：

ng-class="(page === currentPage) ? 'active': ''"

此外，在selectedPage()功能中，您会将currentPage更新为用户选择的网页（例如$scope.currentPage = page）。

使用ng-class启用分页

1 个答案: