Question

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

如何解决此错误？

这是我的分页代码：

<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 - 1更改totalitems.length - 1。

Answer 3

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

Angular js ng-class不起作用

3 个答案: