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?

score 3 · Answer 1 · edited May 23 '17 at 10:27

3

Try using "ng-class".

Reference:

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

Hope this helps.

edited May 23 '17 at 10:27

Community

1
1

answered Sep 04 '15 at 08:06

Vipul Agarwal

1,513
3
14
24

I will take a look now as it seems to be the same sort of thing. Thanks :) – Ben Clarke Sep 04 '15 at 08:19

michelem · Answer 2 · 2015-09-04T08:23:06.820

0

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>

edited Sep 04 '15 at 08:23

answered Sep 04 '15 at 08:10

michelem

14,430
5
50
66

Nothing happens on the fiddle when i click? – Ben Clarke Sep 04 '15 at 08:19
Inspect the element you will see it adds and removes the `full` class EDIT: Added color to class to show something http://jsfiddle.net/michelem09/smebrtwt/1/ – michelem Sep 04 '15 at 08:19
Yeah it shows and hides the red box, but i want it to do two different things at the same time. – Ben Clarke Sep 04 '15 at 08:55
"when clicked needs to toggle two different elements with two different CSS classes." – Ben Clarke Sep 04 '15 at 09:11
Still not clear, but try this: http://jsfiddle.net/michelem09/smebrtwt/2/ or explain better your needs. – michelem Sep 04 '15 at 09:16

score 0 · Answer 3 · answered Sep 04 '15 at 09:04

0

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

answered Sep 04 '15 at 09:04

ryziek

41
3

Add/Toggle CSS with AngularJS

3 Answers3