AngularJS - Toggle view

Question

I have the below controller function that returns me a Boolean value.

Current HTML:

<a href="#" ng-click="collapseNavbar(true)" ng-model="collNavbar">
    <i class="fa fa-arrow-right"></i>
</a>

layoutController:

App.controller('layoutController', ['$scope', function($scope) {

    $scope.collapseNavbar = function(val) {

        return $scope.value = !val;

    }

}])

Based on that value I need to assign the <body> tag a class like yes or no.

Earlier I was using something like this to do it.

HTML :

<div class="toggle-sidebar navbar-nav">
     <ul class="nav navbar-nav">
        <li>
            <a href="#" ng-click="isActive = !isActive" ng-model="collNavbar">
                <i class="fa fa-arrow-right"></i>
            </a>
        </li>
    </ul>
</div>

HTML2

<body ng-class="{'yes': isActive, 'no': !isActive}" ng-controller="layoutController">

But I don't want my code to be in the HTML file. Instead I created a controller for it named layoutController.js and above is the code used in it.

I'm able to pass the Boolean as a class to the body tag on pageload.

But I don't know how to pass it on a click of the a tag where as I've passed the function using ng-click.

Any suggestions like how can I do it will be very helpful for me in the learning it.

Thanks in advance.

$scope.value will always be false in your code.

Shomz
– Shomz

2014-07-22 06:56:23 +00:00
Commented Jul 22, 2014 at 6:56 — Shomz
– Shomz, Commented Jul 22, 2014 at 6:56

Michael Kang · Accepted Answer · 2014-07-22 07:08:34Z

1

Try this:

<body ng-controller="layoutController" ng-app="App" 
                ng-class="getClass(value)">
   <a href="#" ng-click="collapseNavbar(!value)" ng-model="collNavbar">
        <i class="fa fa-arrow-right"></i>
    </a>
 </body>

Controller:

App.controller('layoutController', ['$scope', function($scope) {

    $scope.collapseNavbar = function(val) {
        return $scope.value = val;
    }

    $scope.getClass = function(value) {
         return value ? 'yes': 'no';
    }

}])

The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.

One of the ways you can setup your expression is by returning a string (or a space delimited string) representing your CSS classes.

edited Jul 22, 2014 at 7:08

answered Jul 22, 2014 at 6:50

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Unknown User Over a year ago

How can I access the $scope.value in the body tag to assign the class as yes or no? yes = true and no = false.

Michael Kang Over a year ago

Put the ng-controller="layoutController" on the body tag.

Michael Kang Over a year ago

Do you want ng-class as a conditional attribute?

Unknown User Over a year ago

I don't want to write the ng-class on the body tag and display it and use a separate controller file. If I had to use it the way you've given I can simply set this on anchor tag `ng-click="isActive = !isActive" that's return me a Boolean value. I want to simply my HTML and remove the angular expression in the HTML file.

Unknown User Over a year ago

I simply wanted to return the class name in the function and return value of that function as a class in the body tag.

|

Anoj Philip · Accepted Answer · 2014-07-22 07:11:08Z

1

HTML

  <body ng-class="{'yes': isActive, 'no': !isActive}" ng-controller="layoutController">

    <div class="toggle-sidebar navbar-nav">
         <ul class="nav navbar-nav">
            <li>
                <a href="#" ng-click="collapseNavbar()" ng-model="collNavbar">
                    <i class="fa fa-arrow-right"></i>
                </a>
            </li>
        </ul>
    </div>

    </body>

Controller

App.controller('layoutController', ['$scope', function($scope) {

    $scope.collapseNavbar = function() {

        $scope.isActive= ! $scope.isActive;

    }

}]);

or

HTML

  <body class="{{className}}" ng-controller="layoutController">

    <div class="toggle-sidebar navbar-nav">
         <ul class="nav navbar-nav">
            <li>
                <a href="#" ng-click="collapseNavbar()" >
                    <i class="fa fa-arrow-right"></i>
                </a>
            </li>
        </ul>
    </div>

    </body>

Controller

App.controller('layoutController', ['$scope', function($scope) {

    $scope.collapseNavbar = function() {

        if($scope.isActive)
           $scope.className='yes';
        else
          $scope.className='no';
        $scope.isActive = !$scope.isActive;

    }

}]);

edited Jul 22, 2014 at 7:11

answered Jul 22, 2014 at 6:57

Anoj Philip

1101 gold badge1 silver badge7 bronze badges

2 Comments

Unknown User Over a year ago

Thanks this is too very short and good. But do let me know if you don't mind. Following this kinda practice is good or not instead of directly using the angular expression on HTML tags? +1

Anoj Philip Over a year ago

the best practice is always use angular directives like ng-class. we can control the values from controller.

Collectives™ on Stack Overflow

AngularJS - Toggle view

2 Answers 2

8 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related