Add/Toggle CSS with AngularJS

Question

So basically I have a control on my page which when clicked needs to toggle two different elements with two different CSS classes.

I have managed to get it to toggle one of the controls, but not both.

Here is my element:

This is the element that needs to trigger both controls.

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

The first element (That is working):

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

</div>

Here is the second element(That i need to add):

For this element i need to trigger the CSS class 'full' when the button is clicked and then not full when its clicked again.

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

</div>

I have tried to do this to the hyperlink control and it still doesn't work:

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

Does anyone know how I can get this working using AngularJS?

Answer 1

Try using "ng-class".

Reference:

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

Hope this helps.

Answer 2

Here is a JSFiddle usign ng-class and 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

You can use ngClass for class and ngStyle for style manipulation.