The
ng-class directive is used to
dynamically alter the style class applied to an element in the HTML page based
on the value binding of a different element or $scope item. This directive can
be used to apply selective style elements to elements in the HTML page based on
user preferences or values from the model or other elements in the page.
The ng-class directive evaluates an expression and derives the class to be applied based on the result of the expression. The following is the syntax for the ng-class directive.
<div ng-class="{expression}">
In the below example we allow the user to select a color from the Dropdown and apply appropriate class to the text element based on the value selected by the user.
<html ng-app>
<head>
<title>AngularJS - Basic</title>
<script src="angular.min.js"></script>
<style>
.clsRed
{
color: red;
}
.clsBlue
{
color: blue;
}
.clsGreen
{
color: green;
}
</style>
</head>
<body>
Select Color: <select ng-model="selectedClass">
<option>Red</option>
<option>Blue</option>
<option>Green</option>
</select>
<br/><br/>
Selected Color: {{selectedClass}}
<br/><br/>
<div id="homePage" ng-class="{Red:'clsRed', Blue:'clsBlue', 'Green':'clsGreen'}[selectedClass]">
Dynamic Text Style
</div>
</body>
</html>
The ng-class directive evaluates an expression and derives the class to be applied based on the result of the expression. The following is the syntax for the ng-class directive.
<div ng-class="{expression}">
In the below example we allow the user to select a color from the Dropdown and apply appropriate class to the text element based on the value selected by the user.
<html ng-app>
<head>
<title>AngularJS - Basic</title>
<script src="angular.min.js"></script>
<style>
.clsRed
{
color: red;
}
.clsBlue
{
color: blue;
}
.clsGreen
{
color: green;
}
</style>
</head>
<body>
Select Color: <select ng-model="selectedClass">
<option>Red</option>
<option>Blue</option>
<option>Green</option>
</select>
<br/><br/>
Selected Color: {{selectedClass}}
<br/><br/>
<div id="homePage" ng-class="{Red:'clsRed', Blue:'clsBlue', 'Green':'clsGreen'}[selectedClass]">
Dynamic Text Style
</div>
</body>
</html>
No comments:
Post a Comment