How to toggle a class using ng-click

Question

I know you can easily toggle a class like this:

.c {
  padding: 20px;
  background: #00adff;
}

.a {
  background: #43dd31;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="">
  <div class="c" ng-class="{'a': toggle }">
    <button ng-click="toggle = !toggle">Toggle</button>
  </div>
</div>

My question is, what if I have two separate classes I want to toggle with different buttons on the same div using this method?

... what if I have two separate classes I want toggle with different buttons on the same div using this method... I'm sorry, I don't think I understand what you mean. Can you explain a bit more. maybe specify this use case in more detail. — lealceldeiro
– lealceldeiro, Commented Aug 21, 2018 at 14:45
@31piy already provided the answer I was looking for and there is hardly a need for further details. — Hil
– Hil, Commented Aug 21, 2018 at 15:08

31piy · Accepted Answer · 2018-08-21 15:16:08Z

2

AngularJS allows you to define numerous classes in the map-format. Following is a demo to toggle a class b using a second button.

.c {
  padding: 20px;
  background: #00adff;
}

.a {
  background: #43dd31;
}

.b {
  border: 5px dashed yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="">
  <div class="c" ng-class="{'a': toggle, b: secondToggle}">
    <button ng-click="toggle = !toggle">Toggle</button>
    <button ng-click="secondToggle = !secondToggle">Second Toggle</button>
  </div>
</div>

edited Aug 21, 2018 at 15:16

answered Aug 21, 2018 at 14:45

31piy

23.9k6 gold badges51 silver badges69 bronze badges

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

Collectives™ on Stack Overflow

How to toggle a class using ng-click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related