AngularJS - add active class to itself after click

Question

Is there a simple declarative way (without a additional function in the $scope) to marked clicked element with AngularJS?

e.g. I have a button which I want to marked as clicked/checked.

<button ng-model="form.btn" ng-click=" // do stuff here to add a class or attr ">Go</button>

I was able to achieve this with external function but I am looking for a declarative way / all in HTML template.

sylwester · Accepted Answer · 2014-07-04 16:23:52Z

4

If you want toggle class use this: http://jsbin.com/vimero/1/edit

<button ng-model="btn" ng-click="btn =! btn" ng-class="{'active' : btn}"> 
 Toogle 
</button>

edited Jul 4, 2014 at 16:23

answered Jul 4, 2014 at 14:13

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

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

2 Comments

Iladarsda Over a year ago

Can you please explain what is going on here? This btn =! btn looks very mysterious .

jcubic Over a year ago

@User789 it change from true to false and false to true. It's a toggle. But it should be btn = !btn;

AlwaysALearner · Accepted Answer · 2014-07-04 13:47:41Z

1

<button ng-model="form.btn" ng-click="form.btn = true" 
ng-class="{'active' : form.btn}">
    Go
</button>

answered Jul 4, 2014 at 13:47

AlwaysALearner

43.9k9 gold badges98 silver badges78 bronze badges

2 Comments

maurycy Over a year ago

That assumes that form.btn will be bool value, string will fail here, please extend it to be more generic ;)

Iladarsda Over a year ago

Yes - string would be very useful, would be great to have this inside a ng-repeat with an array like ['yes', 'no']

Miraage · Accepted Answer · 2014-07-04 13:47:56Z

1

ng-click="yourFunction($event.target)"

And do your transformations in yourFunction. You'll have HTMLElement passed as 1st param.

answered Jul 4, 2014 at 13:47

Miraage

3,4943 gold badges28 silver badges43 bronze badges

Comments

Bobby Duebelbeis · Accepted Answer · 2015-12-22 21:31:47Z

1

I found this works pretty well for a group of buttons to toggle active ng-class if the condition set in ng-click is met:

<button ng-class="{'active' : activeButton == 'firstButton'} ng-click="activeButton = 'firstButton'>
  First Button
</button>
<button ng-class="{'active' : activeButton == 'secondButton'} ng-click="activeButton = 'secondButton'>
  Second Button
</button>
<button ng-class="{'active' : activeButton == 'thirdButton'} ng-click="activeButton = 'thirdButton'>
  Third Button
</button>

answered Dec 22, 2015 at 21:31

Bobby Duebelbeis

513 bronze badges

Collectives™ on Stack Overflow

AngularJS - add active class to itself after click

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related