Usage of the ng class Directive in the AngularJS Getting Started Tutorial

2021-07-07 06:04:27
OfStack

AngularJS ng-class Directive

AngularJS instance

Modify < div > Element's class:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
.sky {
 color:white;
 background-color:lightblue;
 padding:20px;
 font-family:"Courier New";
}
.tomato {
 background-color:coral;
 padding:40px;
 font-family:Verdana;
}
</style>
</head>
<body ng-app="">

<p> Select 1 Category :</p>

<select ng-model="home">
<option value="sky"> Sky color </option>
<option value="tomato"> Tomato color </option>
</select>

<div ng-class="home">
 <h1>Welcome Home!</h1>
 <p>I like it!</p>
</div>

</body>
</html>

Definition and usage

The ng-class directives are used to dynamically bind one or more CSS classes to an HTML element.

The value of the ng-class instruction can be a string, an object, or an array.

If it is a string, multiple class names are separated by spaces.

For objects, use the key-value pair, where key is a Boolean value and value is the name of the class you want to add. Classes are added only if key is true.

If it is an array, it can consist of a combination of strings or objects, and the elements of the array can be strings or objects.

Grammar

< element ng-class="expression" > < /element >

All HTML elements are supported.

Parameter value

值	描述
expression	表达式返回1个或多个类名。

The above is the AngularJS ng-class instruction data collation, friends in need of reference.