If you study the inbuilt direcctive in angular js then ngClass is also a very useful directive. This ngClass directive allow you to add or remove classes on a html element. In Html page this ngClass use as ng-class. Syntax of this class is very smiple and its easy to use. It can be easily understand by a example suppose we have a three checkbox and in just below there are div container these checkbox have three different color type one is red second is blue and last one is green, when we click on red then div color will be red and so on. So we can do this easily by class in angular js. Yeah offcourse you can do this by another way also
Here we check it out about following angular ng class example.
1. Angular ng class with normal string syntax.
2. Angular js conditional class.
3. Angular js conditional class with ternary operator.
.blue
Now we try to do this same example with conditional class . In this you can set condition and also assign conditional class.
Offcourse output is same as above example.we can do lots of thing with angular class directive.
Here we check it out about following angular ng class example.
1. Angular ng class with normal string syntax.
2. Angular js conditional class.
3. Angular js conditional class with ternary operator.
Angular JS ng class example
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>
.red
{
background-color: red;
}
{
background-color: blue;
}
.green
{
background-color: green;
}
</style>
<body
ng-app="">
<p>Choose a class:</p>
<select ng-model="home">
<option value="">select</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
<div ng-class="home">
<h3>Anguar JS ng class </h3>
</div>
</body>
</html>
Output of ng-class
Choose a class:
Anguar JS ng class
Angular js conditional class example
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style
type="text/css">
.red
{
background-color: red;
}
.blue
{
background-color: blue;
}
.green
{
background-color: green;
}
</style>
<body
ng-app="">
<p>Choose a class:</p>
<select ng-model="home">
<option value="">select</option>
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<div ng-class="{1:'red',
2:'blue',3:'green'}[home]">
<p>Angualr js ng class!</p>
</div>
</body>
</html>
0 comments:
Post a comment