angularjs dynamically set css on html element

Name: javascript - angularjs dynamically set css on html element - Stack Overflow
Rating: 4.6 (7943 reviews)

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
CommentedOct 8, 2015 at 5:23 — Paresh Gami, CommentedOct 8, 2015 at 5:23
Got it.. Thanks Paresh
– Pratap A.K
CommentedOct 8, 2015 at 5:31 — Pratap A.K, CommentedOct 8, 2015 at 5:31
Put controller before using {{themeClass}}
– Paresh Gami
CommentedOct 8, 2015 at 5:31 — Paresh Gami, CommentedOct 8, 2015 at 5:31

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

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

This one worked for me. Thanks to Paresh Gami for reminding me to use homeController. — Pratap A.K, CommentedOct 8, 2015 at 5:35

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

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

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

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Related