CODEWITHSUNDEEP
htmlcssangularjs
Noble
Noble

Reputation: 115

Switch css class angularjs

I know there are some similar questions, but I want to show the css class using "showme" as u can see in the code below:

<section>
    <article class="" data-ng-controller="AplicationCtrl" data-ng-init="init();">
        <nav class="navbar menu-nav " role="navigation">
            <a href="" data-ng-click="showme=false;  left=true;">Show</a>
            <button data-ng-click="showme=true;  left=false;" >Hide</button> 
        </nav>
        <div class="navbar-default sidebar" role="navigation" data-ng-show="showme">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav customnavhov" id="side-menu">
                    <li><a href="#"><i class="fa fa-dashboard fa-fw fa-2x"></i></a></li>
                </ul>
            </div>
        </div>          
        <div class="navbar-default sidebar" role="navigation" data-ng-hide="showme">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav customnavhov" id="side-menu">
                    <li><a href="#"><i class="fa fa-dashboard fa-fw fa-2x"></i> Random text </a></li>
                </ul>
            </div>
        </div>
        <section data-ng-class="{'max-margin': showme,'min-margin':!showme}"> Content </section>
    </article>
</section>

The aplication shows depending of the value of showme first or second div, but now I want to make the content on the right has a margin-left depending of wich one is selected.

My controller:

.controller('ApplicationCtrl', ['$scope', function($scope) {

    $scope.init = function() {
    };

    $scope.showme = false;

} ])

Ok, now this is weird, if i place the buttons inside the section, only works to show/hide the divs, if i place it after the section, only works the margin. Dont know how to fix it.

Upvotes: 0

Views: 131

Answers (2)

Navaneet
Navaneet

Reputation: 1387

You can use ng-class as suggested by Ismapro. Below is an example

Example

data-ng-class="{'one': showme,'two':!showme}"

CSS

.one{margin-left:25px;}
.two{margin-left:75px;}

Upvotes: 0

Ismapro
Ismapro

Reputation: 130

you can pearhaps use conditionnal 

ng-class="{'contentmargin':showme}"

with 

.contentmargin{margin-left:Xpx;}

https://docs.angularjs.org/api/ng/directive/ngClass

Upvotes: 0

Related Questions