Friday, 13 November 2015

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>

No comments :

Post a comment