Angular js ng-class不工作

Question

我正在尝试对我的信息列表进行分页。目前，有两个按钮，即previous和next按钮。previous按钮正常工作，但next按钮正常工作，但仍在继续工作。实际上，我希望在到达列表末尾时将其禁用。但是现在我仍然可以点击next按钮。

我该如何解决这个bug？

这是我的分页代码：

<div ng-show="filteredItems > 0">

<ul class="pagination" page="currentPage">
    <li ng-class="{disabled: currentPage == 1}">
        <a href ng-click="prevPage()">« Prev</a>
    </li>

    <li ng-class="{disabled: currentPage == totalItems - 1}">
        <a href ng-click="nextPage()">Next »</a>
    </li>
  </ul>
</div>

这是我的controller.js代码：

$scope.nextPage = function () {
    if ($scope.currentPage < $scope.totalItems - 1) {
            $scope.currentPage++;
            console.log($scope.totalItems);
        }
    };
}

Answer 1

下面是一个有效的plunker.

将ngClick从a移至li 或将ngClass移至a。对于第一种情况：

<li ng-class="{disabled: currentPage == totalItems - 1}" ng-click="nextPage()">
    <a>Next »</a>
</li>

这里假设您定义了一个名为disabled的类。如果没有，请按如下方式定义：

.disabled {
    opacity: 0.5;
    pointer-events: none;
}

Answer 2

尝试使用totalitems.length - 1更改totalitems - 1。

Answer 3

试试这个ng-class="{'disabled'：currentPage == totalItems - 1}