angularjs dynamically set css on html element

Question

<!DOCTYPE html>
<html ng-app="myApp" class="{{themeClass}}">
<head lang="en">
    <meta charset="UTF-8">
    <title>Project Title</title>

</head>
<body>
    <nav class="header">
    <ul class="navbar">
        <li>
            <span>Project Name</span>
        </li>               
    </ul>
    </nav>

<div ng-controller="myCtrl">

</div>

</body>
</html>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope){
    $scope.themeClass = something;
})

How to change , class="{{themeClass}}" value dynamically from angularJS code. HTML element is not bind to any controller and also I don't have any directives since I am using spring boot security.

Can someone please let me know how to change "themeClass" variable value dynamically?? Thanks in advance

you have to take one controller at least.

Paresh Gami
– Paresh Gami

2015-10-08 05:23:46 +00:00
Commented Oct 8, 2015 at 5:23 — Paresh Gami
– Paresh Gami, Commented Oct 8, 2015 at 5:23
Got it.. Thanks Paresh

Pratap A.K
– Pratap A.K

2015-10-08 05:31:28 +00:00
Commented Oct 8, 2015 at 5:31 — Pratap A.K
– Pratap A.K, Commented Oct 8, 2015 at 5:31
Put controller before using {{themeClass}}

Paresh Gami
– Paresh Gami

2015-10-08 05:31:47 +00:00
Commented Oct 8, 2015 at 5:31 — Paresh Gami
– Paresh Gami, Commented Oct 8, 2015 at 5:31

Pratap A.K · Accepted Answer · 2015-10-08 05:33:00Z

1

<!DOCTYPE html>
<html ng-app="myApp" ng-controller="homeCtrl" class="{{themeClass}}">
<head lang="en">
    <meta charset="UTF-8">
    <title>Project Title</title>

</head>
<body>
    <nav class="header">
    <ul class="navbar">
        <li>
            <span>Project Name</span>
        </li>               
    </ul>
    </nav>

</body>
</html>

var app = angular.module('myApp', []);

app.controller('homeCtrl', function($scope){
    $scope.themeClass = something;
});

answered Oct 8, 2015 at 5:33

Pratap A.K

4,52715 gold badges49 silver badges81 bronze badges

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

1 Comment

Pratap A.K Over a year ago

This one worked for me. Thanks to Paresh Gami for reminding me to use homeController.

z0r0 · Accepted Answer · 2015-10-08 05:33:31Z

1

Put ng-controller in a parent or the same tag where you want to use the binding.( it should be in the scope not outside it)
Use ng-class="themeClass";

Check the code:

<!DOCTYPE html>
<html ng-app="myApp"  ng-controller="myCtrl" ng-class="themeClass">
<head lang="en">
<meta charset="UTF-8">
<title>Project Title</title>
</head>
<body>
   <nav class="header">
   <ul class="navbar">
       <li>
           <span>Project Name</span>
       </li>               
   </ul>
   </nav>

</body>
</html>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope){
    $scope.themeClass = something;
});

answered Oct 8, 2015 at 5:33

z0r0

6664 silver badges15 bronze badges

Comments

Arun · Accepted Answer · 2015-10-08 05:56:49Z

Check This link http://jsfiddle.net/mrajcok/H2Qcn/

<div ng-app="classApp" ng-controller="bootstrapController">
    <p>Enter one character at a time for button transitions</p>
    <input ng-model="message" />
    <button class="btn btn-default" ng-class="{
        'btn-danger': isOne(),
        'btn-warning': isTwo(),
        'btn-info': isThree(),
        'btn-success': isFourOrMore()
    }">Button State</button>
</div>

var app = angular.module('classApp', []).
controller('bootstrapController', ['$scope', function ($scope) {
    $scope.isOne = function () {
        if (typeof $scope.message !== 'undefined') {
            return $scope.message.length == 1;
        } else {
            return false;
        }
    }

    $scope.isTwo = function () {

        if (typeof $scope.message !== 'undefined') {
            return $scope.message.length == 2;
        } else {
            return false;
        }
    }

    $scope.isThree = function () {

        if (typeof $scope.message !== 'undefined') {
            return $scope.message.length == 3;
        } else {
            return false;
        }
    }

    $scope.isFourOrMore = function () {

        if (typeof $scope.message !== 'undefined') {
            return $scope.message.length >= 4;
        } else {
            return false;
        }
    }

div {
    padding: 20px;
}
input {
    padding: 5px;
    font-size:16px;

}
.btn {
    transition: all 0.3s linear;
}

Collectives™ on Stack Overflow

angularjs dynamically set css on html element

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related