Toggle a class on an element click in Angular.js

Question

In angular.js how can I toggle a css class active on and off on click of the element? I know I can use ng-class and ng-click but how do I reference itself? For example, let's say I have three buttons:

<a class="btn" ng-click="" ng-class"">First</a>
<a class="btn" ng-click="" ng-class"">Second</a>
<a class="btn" ng-click="" ng-class"">Third</a>

MBielski · Accepted Answer · 2014-07-31 23:12:09Z

1

<a ng-click="firstActive = !firstActive" ng-class"{'btn':true, 'active':firstActive}">First</a>
<a ng-click="secondActive = !firstActive" ng-class"{'btn':true, 'active':secondActive}">Second</a>
<a ng-click="thirdActive = !firstActive" ng-class"{'btn':true, 'active':thirdActive}">Third</a>

You'll have to have separate scope variables in your controller for firstActive, secondActive, and thirdActive, all set to false by default.

answered Jul 31, 2014 at 23:12

MBielski

6,6103 gold badges35 silver badges46 bronze badges

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

2 Comments

Justin Over a year ago

Is there a way without explicitly setting all these flags and polluting the controller?

MBielski Over a year ago

I don't see it as "polluting" the controller. The controller is supposed to hold display logic and data linkage, and that is exactly what this is. If you don't want to do it this way, try using the Angular-UI buttons.

Collectives™ on Stack Overflow

Toggle a class on an element click in Angular.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related