What is ng-switch directives in Angularjs ?
ng-switch 2 directives to add or remove HTML elements from DOM conditionally based on an expression. If the expression is true, then it will display/add HTML element to DOM and vice versa if the condition is false.
Keep these 3 things in mind when using ng-switch in AngujarJS:
The ng-switch directive is added to our primary HTML element (main div tag) and set the expression that acts as a selection condition.
The ng-switch-when directive is attached to each child element, which will display only if the expression is true, else it would be removed from DOM.
The ng-switch-default directive by its named indicate that this is display as default if no expression is matched.
Example: using ng-switch directives in Angularjs.
Here in this example, we will display matched section based on our drop-down selection. First, we add a dropdown list with values as fruit, animal, vehicle. Next, we add some data to each section. Final HTML markup looks like as written below.
<select ng-model="myVar"> <option value="fruit">Fruit <option value="animal">Animal <option value="vehicle">Vehicle </select> <div ng-switch="myVar"> <div ng-switch-when="fruit"> <ul> <li>Apple</li> <li>Orange</li> <li>Mango</li> <ul> </div> <div ng-switch-when="animal"> <ul> <li>Dog</li> <li>Cat</li> <li>Horse</li> <ul> </div> <div ng-switch-when="vehicle"> <ul> <li>Bus</li> <li>Car</li> <li>Train</li> <ul> </div> <div ng-switch-default> <p>Select something from the dropdown, to switch the content of specific DIV.</p> </div>