Angular js ng-class不起作用

Question

I am trying to do a pagination for my list of informations. Currently, there is two buttons which are previous and next button. The previous button is working but the next button is working but its continously working. Actually, I want it to be disabled once the end of the list has been reached. But now I can still click on the next button.

How do I solve this bug?

This is my pagination code:

<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>

This is my controller.js code:

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

Answer 1

Here's a working plunker.

Move the ngClick from a to li OR move the ngClass to a . For the first case:

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

And this is assuming you have a class defined called disabled . If not, define it as follows:

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

Answer 2

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

Answer 3

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