[email protected]      beta
Donate

AngularJs ng-switch directives

Overview: Understanding ng-switch directive, Use of AngularJS ng-switch directives with an example, It is used to add or remove HTML elements conditionally depending on an expression.

What is ng-switch directives in Angularjs ?

Angularjs provides ng-if and 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:

  1. ng-switch
  2. ng-switch-when
  3. ng-switch-default

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>

Try is yourself


  Popular Tag
  Recent Posts
  Follow Us
If you find these tutorials helpful then please donate. It will lead me to do more tutorials.
Donate