使用 AngularJS 添加/切换 CSS答案

【问题标题】：Add/Toggle CSS with AngularJS使用 AngularJS 添加/切换 CSS
【发布时间】：2015-11-30 07:24:24
【问题描述】：

所以基本上我的页面上有一个控件，当点击它时需要使用两个不同的 CSS 类切换两个不同的元素。

我已经设法让它切换其中一个控件，但不能同时切换两者。

这是我的元素：

这是需要触发两个控件的元素。

<a id="main-menu-toggle" data-toggle="collapse" data-target="#sidebar" class="hidden-xs open"><i class="fa fa-bars"></i></a>

第一个元素（有效）：

<div id="sidebar" class="col-lg-2 col-sm-1 collapse" style="min-height: 759px; display: block;">

</div>

这是第二个元素（我需要添加）：

对于这个元素，我需要在单击按钮时触发 CSS 类“完整”，然后在再次单击时不完整。

<div id="content" class="col-lg-10 col-sm-11 full">

</div>

我已经尝试对超链接控件执行此操作，但仍然无法正常工作：

<a id="main-menu-toggle" data-toggle="collapse,full" data-target="#sidebar,#content" class="hidden-xs open"><i class="fa fa-bars"></i></a>

有谁知道我如何使用 AngularJS 来完成这项工作？

【问题讨论】：

标签： javascript html css angularjs

【解决方案1】：

尝试使用“ng-class”。

参考：

https://stackoverflow.com/a/16529903/5052704

希望这会有所帮助。

【讨论】：

我现在来看看，因为它似乎是同一类东西。谢谢:)

【解决方案2】：

这是JSFiddle 签名ng-class 和ng-click：

<a id="main-menu-toggle" data-toggle="collapse" data-target="#sidebar" class="hidden-xs open" ng-click="clicked = (clicked) ? false : true">
   <i class="fa fa-bars"></i>click
</a>

<div id="sidebar" class="col-lg-2 col-sm-1 collapse" ng-class="{'full': clicked}" style="min-height: 759px; display: block;">
   THEDIV
 </div>

【讨论】：

当我点击时，小提琴没有任何反应？
检查你将看到的元素添加和删除full 类编辑：为类添加颜色以显示jsfiddle.net/michelem09/smebrtwt/1
是的，它显示并隐藏了红色框，但我希望它同时做两件不同的事情。
"点击时需要用两个不同的 CSS 类切换两个不同的元素。"
仍然不清楚，但试试这个：jsfiddle.net/michelem09/smebrtwt/2 或更好地解释您的需求。

【解决方案3】：

您可以使用ngClass 进行类操作，使用ngStyle 进行样式操作。

【讨论】：