CODEWITHSUNDEEP
javascriptcssangularjs
Pratap A.K
Pratap A.K

Reputation: 4517

angularjs dynamically set css on html element

<!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

Upvotes: 1

Views: 85

Answers (3)

Arun
Arun

Reputation: 1185

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;
}

Upvotes: 0

z0r0
z0r0

Reputation: 666

  • 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;
});

Upvotes: 1

Pratap A.K
Pratap A.K

Reputation: 4517

<!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;
});

Upvotes: 1

Related Questions