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