डाउनलोड पी.डी.एफ. ई-बुक्स
AJS - Directives ng-class

ng-class directive ये HTML Element पर class(es) को bind करने के लिए इस्तेमाल किया जाता है |

ng-class directive पर दी जानेवाली value ये String object या array हो सकती है |

अगर value String होती है तो एक से ज्यादा classes को comma से seperate किया जाता है |

अगर value object होता है तो key-value के pair में दिया जाता है | उस key-value में key ये class name होता है और value ये boolean होती है |


Syntax for ng-class Directive in AngularJS

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

ng-class Attribute's Parameters in AngularJS

expression : यहाँ पर class(es), object(s) या array ये expression दिया जाता है |


Example for ng-class Directive using String in AngularJS

Source Code :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>

<style type="text/css">
.red{ background-color : red; }
.bold{ font-weight : bold; }
.blue{ color : blue; }
</style>

<body ng-app="">

<p ng-class="myClass">Using String</p>

<input ng-model="myClass" /><br />
Enter red blue or bold<br />

</body>
</html>
Output :

Using String


Enter red blue and bold

Example for ng-class Directive using Object in AngularJS

Source Code :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>

<style type="text/css">
.red{ background-color : red; }
.bold{ font-weight : bold; }
.blue{ color : blue; }
</style>

<body ng-app="">

<p ng-class="{red:bg, bold:fw, blue:c}">Using Object</p>

Add Background : <input type="checkbox" ng-model="bg" />{{bg}}<br /> 
Add Font-Weight : <input type="checkbox" ng-model="fw" />{{fw}}<br />
Add Text Color : <input type="checkbox" ng-model="c" />{{c}}

</body>
</html>
Output :

Using Object

Add Background : {{bg}}
Add Font-Weight : {{fw}}
Add Text Color : {{c}}

Example for ng-class Directive using Array in AngularJS

Source Code :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>

<style type="text/css">
.red{ background-color : red; }
.bold{ font-weight : bold; }
.blue{ color : blue; }
</style>

<body ng-app="">

<p ng-class="[s1, s2]">Using Array</p>
<input ng-model="s1"
placeholder="Enter red, bold or blue"/><br/>
<input ng-model="s2"
placeholder="Enter red, bold or blue"/><br/>

</body>
</html>
Output :

Using Array