Question

我正在以下列格式显示分页搜索结果。

1 2 3 4 5 6 7 8 9 10

使用

<ul>
    <li ng-repeat="page in pages">
        <span ng-click="next($index)">{{$index + 1}}</span>
    </li>
</ul>

我应该使用CSS在视觉上使currentPage不可点击，我想知道如何通过使用点击事件在运行时添加或删除类来实现角度。我正在模拟如何显示Google搜索结果分页区域。

.link {
    text-decoration: underline;
}
.no-link {
    text-decoration: none;
}

Answer 1

如果您在currentPage上保留$scope变量，并且$scope.currentPage函数中的$scope.next()可靠地更新，您可以执行的操作是添加{关于你的范围的{1}}指令：

ng-class

实际上，我们正在做的是我们传递<span ng-click="next($index)" ng-class="{ 'link' : currentPage !== $index, 'no-link' : currentPage === $index }">{{$index + 1}}</span>形式ng-class的对象映射如果对应于CSS类的角度表达式是真实的，那么该类将被添加到HTML元素，否则将被省略。

因此，在您的示例中，如果页面的map['cssClass'] = /* some angular expression */不是我们当前正在查看的页面（即它不是$index），则只会将“链接”类添加到范围。

Answer 2

将ng-class添加到您的标记

<ul>
    <li ng-repeat="page in pages">
        <span ng-class="{'link':currentPage !== $index, 'no-link': currentPage === $index}" ng-click="next($index)">{{$index + 1}}</span>
    </li>
</ul>

在函数顶部的下一个函数中添加

if ($scope.currentPage === index) return false;

分页结果跟踪当前页面

2 个答案: