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

ng-switch directive ये HTML Element को add या remove करने के लिए इस्तेमाल किया जाता है |

ng-switch directive ये switch-case statement जैसे होता है |

अगर ng-switch directive पर दिया हुआ expression; ng-switch-when directive के value से match होता है तो उस element को add किया जाता है और बाकी के सभी elements को remove किया जाता है |

अगर expression से कोई value match नहीं होती है तो ng-switch-default directive के element को add किया जाता है |


Syntax for ng-switch Directive in AngularJS

<element ng-switch="expression">
  <element ng-switch-when="value"></element>
  <element ng-switch-when="value"></element>
  <element ng-switch-when="value"></element>
  <element ng-switch-default></element>
</element>

ng-switch Attribute's Parameters in AngularJS

expression : यहाँ पर expression दिया जाता है |


Example for ng-switch 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>
<style type="text/css">
.style1{background-color:red;}
.style2{background-color:blue;}
.style3{background-color:yellow;}
.style4{background-color:orange;}
.style5{background-color:purple;}
</style>
</head>
<body>

<div ng-app="">

<input type="text" ng-model="alpha" placeholder="Enter A,B,C or D"/><br />
<div ng-switch="alpha">
    <div ng-switch-when="A" class="style1">A</div>
    <div ng-switch-when="B" class="style2">B</div>
    <div ng-switch-when="C" class="style3">C</div>
    <div ng-switch-when="D" class="style4">D</div>
    <div ng-switch-default class="style5">No Alphabet</div>
</div>

</div>

</body>
</html>
Output :

A
B
C
D
No Alphabet