Angular js ng-class not working

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);
        }
    };
}

deceze · Accepted Answer · 2016-03-07 15:30:59Z

2

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

edited Mar 7, 2016 at 15:30

deceze♦

525k89 gold badges807 silver badges954 bronze badges

answered Mar 7, 2016 at 15:13

Tarun Dugar

8,9938 gold badges50 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Tarun Dugar Over a year ago

move the ng-click to the li containing the anchor tag

anonymous5671 Over a year ago

i guess the problem is in the totalItems

anonymous5671 Over a year ago

my currentPage value is 1 and my totalItems value is 1000

Tarun Dugar Over a year ago

exactly, the condition is never getting true and thats why the disable class isn't getting applied.

deceze Over a year ago

Quotes aren't needed around disabled; it's a Javascript object literal, in which keys work just fine unquoted (within limits).

|

Alvaro Flaño Larrondo · Accepted Answer · 2016-03-07 16:43:22Z

0

Try changing totalitems - 1 with totalitems.length - 1.

edited Mar 7, 2016 at 16:43

Alvaro Flaño Larrondo

5,7402 gold badges31 silver badges50 bronze badges

answered Mar 7, 2016 at 15:36

Hassan Tariq

7407 silver badges15 bronze badges

1 Comment

Hassan Tariq Over a year ago

can you make js fiddle for it

B G Nithin Malathesh · Accepted Answer · 2018-05-17 11:15:09Z

0

try this ng-class="{'disabled': currentPage == totalItems - 1}

answered May 17, 2018 at 11:15

B G Nithin Malathesh

771 silver badge10 bronze badges

Collectives™ on Stack Overflow

Angular js ng-class not working

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related