[英]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;
})
如何從angularJS代碼動態更改class =“ {{themeClass}}”值。 HTML元素未綁定到任何控制器，並且由於我使用的是Spring Boot安全性，所以我也沒有任何指令。
有人可以讓我知道如何動態更改“ themeClass”變量值嗎？ 提前致謝
<!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;
});
檢查代碼：
<!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;
});
檢查此鏈接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;
}
如何使用angularjs（1.x）動態設置HTML元素的id屬性？
[英]How to set the id attribute of a HTML element dynamically with angularjs (1.x)?
在AngularJS中以編程方式在運行時設置HTML元素的寬度
[英]Programmatically set width of HTML element at runtime in AngularJS
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.