ng-click not firing in angularjs

Question

I am trying to use bootstrap tab with angularjs & have added ng-click to set active class on tab but its not happening, below is my code:

<ul class="nav nav-tabs" role="tablist">
        <li role="presentation" ng-class="{ 'active': tab === 1 }"><a href="#email" aria-controls="email" role="tab" data-toggle="tab" ng-click="tab = 1">Email</a></li>
        <li role="presentation" ng-class="{ 'active': tab === 2 }"><a href="#phone" aria-controls="phone" role="tab" data-toggle="tab" ng-click="tab = 2">Phone</a></li>
        <li role="presentation" ng-class="{ 'active': tab === 3 }"><a href="#username" aria-controls="username" role="tab" data-toggle="tab" ng-click="tab = 3">Username</a></li>
    </ul>

tab's value is not changing and that's why the particular class is not getting applied.

Mistalis · Accepted Answer · 2016-08-04 12:07:05Z

1

Just change === to ==, it should works:

<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" ng-class="{ 'active': tab == 1 }"><a href="#email" aria-controls="email" role="tab" data-toggle="tab" ng-click="tab = 1">Email</a></li>
    <li role="presentation" ng-class="{ 'active': tab == 2 }"><a href="#phone" aria-controls="phone" role="tab" data-toggle="tab" ng-click="tab = 2">Phone</a></li>
    <li role="presentation" ng-class="{ 'active': tab == 3 }"><a href="#username" aria-controls="username" role="tab" data-toggle="tab" ng-click="tab = 3">Username</a></li>
</ul>

JSFiddle here.

answered Aug 4, 2016 at 12:07

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

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

2 Comments

Dheeraj Agrawal Over a year ago

Actually I have the router as well, so that #email, #phone is creating issue, its changing the route, so how I can disable it?

Mistalis Over a year ago

I think you should post another question for this problem (and we will need your JS file where you define your routes). :)

Antipod · Accepted Answer · 2016-08-04 11:25:41Z

0

In your controller, try to use

$scope.obj = { tab : 1};

and then in the view:

obj.tab

instead of just tab

answered Aug 4, 2016 at 11:25

Antipod

1,6234 gold badges25 silver badges43 bronze badges

2 Comments

Dheeraj Agrawal Over a year ago

still no luck, its same

Dheeraj Agrawal Over a year ago

When page reloads this check ng-class="{ 'active': tab === 1 }" works fine, but then onclick tab's value is not changing

Collectives™ on Stack Overflow

ng-click not firing in angularjs

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related