AngularJS
ng-class directive
ng-class
directive provide you facilitates to add one or more CSS classes on HTML
element with an expression. ng-class expression can be a String, an object or
an array.
Syntax:
- <element ng-class="expression"></element>
If ng-class expression is string then you need to
separate classes with space. if expression is object that it should be key/value pair where key
will be used as class name and value will be the Boolean true or false.
Example:
<!DOCTYPE html>
<html>
<head>
<title>ng-class Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>
.class1
{
color:
white;
background-color:
#18a4a3;
padding:
40px;
font-family: "Courier
New";
}
.class2
{
background-color:
coral;
padding:
40px;
color:
white;
font-family:
Verdana;
}
.class3
{
background-color:
#ffd100 !important;
padding:
40px;
color:
#333;
font-family:
Verdana;
}
.class4
{
background-color:
#2285ff;
padding:
40px;
color:
#333;
font-family:
Verdana;
}
</style>
</head>
<body>
<p>Select a class:</p>
<div
ng-app="">
<select ng-model="color">
<option value=""
selected>Select Option</option>
<option value="class1">Class1</option>
<option value="class2">Class2</option>
<option value="class3">Class3</option>
<option value="class4">Class4</option>
</select>
<br />
<div ng-class="color">
<h1>Welcome
to code-view.com !</h1>
</div>
</div>
</body>
</html>
OutPut:
No comments:
Post a comment