javascript - 使用ng-class启用分页

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

得到数据计数后，将$ scope.pages设置为[0,1,2..n]，其中n是计数/ 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在li的内部前进，而且我可以看到该页面是期望值（当我对其进行硬编码时，我也可以看到样式看起来正确），那么为什么条件式样式不能正常工作因为我上面有它？

提前致谢。

最佳答案

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

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

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

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

此外，在selectedPage()功能中，您可以将currentPage更新为用户选择的页面（即$scope.currentPage = page）。

关于javascript - 使用ng-class启用分页，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28461700/