使用AngularJS添加/切换CSS

Question

所以基本上我的页面上有一个控件，当单击该控件时，需要使用两个不同的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来完成这项工作？

Answer 1

尝试使用“ ng-class ”。

参考：

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

希望这可以帮助。

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

Answer 3

您可以将ngClass用于类，将ngStyle用于样式操作。