Question

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

我尝试使用(future (loop [] (Thread/sleep 15000) (update-machine-info) (recur)))：

来切换课程

ng-class

codepen

Answer 1

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

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

ng-click="toggle=!toggle"：点击按钮后，toggle的值将在相同的变量中反转并更新。
ng-class中的三元操作会检查toggle是否真实，然后添加类red，否则会删除该类。

<强>演示：

＆＃13;

.red {
  color: red;
}

＆＃13;

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

＆＃13;

您也可以使用

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

＆＃13;

.red {
  color: red;
}

＆＃13;

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

＆＃13;

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

1 个答案: