在AngularJS中单击元素上切换CSS类？

Question

I want to use the predefined AngularJS Directives to toggle a class on click without having to write JavaScript code.

I tried to toggle class by using ng-class :

<button ng-model="toggle" ng-class="{'red' : toggle}">Change Class</button>

codepen

Answer 1

Use a switch with ternary operator as follow

<button ng-model="toggle" ng-class="toggle ? 'red' : ''" ng-click="toggle=!toggle">Change Class</button>

1. ng-click="toggle=!toggle" : When clicked on button the value of toggle will be reversed and updated in the same variable.
2. The ternary operation in ng-class will check if the toggle is truthy, then add class red else it removes the class.

Demo:

 .red { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app> <button ng-model="toggle" ng-class="toggle ? 'red' : ''" ng-click="toggle=!toggle">Change Class</button> </div> 

---

You can also use

<button ng-model="toggle" ng-class="{'red' : toggle}" ng-click="toggle=!toggle">Change Class</button>

 .red { color: red; } 

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