切换AngularJS中单击元素的CSS类？

Question

我想使用预定义的AngularJS指令在点击时切换一个类,而不必编写JavaScript代码.

我尝试使用ng-class以下方法切换类:

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

codepen

Answer 1

使用带三元运算符的开关如下

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

1. ng-click="toggle=!toggle":单击按钮时,toggle将反转并在同一变量中更新值.
2. 三元运算ng-class将检查是否toggle真实,然后添加类别,red否则它将删除该类.

演示:

.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>

你也可以使用

<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>