ng-switch

What is ng-switch:

ng-switch used to create a HTML element on given condition, If condition is true then targeted HTML element will be created otherwise it will not be created..

Description of ng-switch:

ng-switch is a conditional directive .With the help of ng-switch created a DOM object on a given true condition.This directive creates a new scope this is clear because it is created a new DOM. ng-switch has priority 1200..

Syntax of ng-switch:

<element ng-switch="expression">

    <element ng-switch-when="value1">matched with value1</element>

    <element ng-switch-when="value2">matched with value2</element>

    <element ng-switch-default>not  matched with any value(Default)</element>

</element>

or

<div ng-switch="expression">

    <div ng-switch-when="value1">matched with value1</div>

    <div ng-switch-when="value2">matched with value2</div>

    <div ng-switch-default>not  matched with any value(Default)</div>

</div>

How to Use ng-switch/ng-switch Example::

Example:

<div ng-app="webapp">

    <div ng-controller="angularjsexampleCtlr">

        <div>

            Angularjs Example of ng-switch

            <div>

                <input type="radio" name="rdo" ng-model="rdocityname" value="Delhi"/>

                <input type="radio" name="rdo" ng-model="rdocityname" value="Mumbai"/>

               <input type="radio" name="rdo" ng-model="rdocityname" value="Chennai"/>

            </div>

            <div ng-switch="rdocityname">

                <div ng-switch-when="Delhi">Delhi</div>

                <div ng-switch-when="Mumbai">Mumbai</div>

                <div ng-switch-default>no city matched (Default)</div>

            </div>

           

        </div>

    </div>

</div>