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