AngularJS ng-Switch Directive

The AngularJS ng-switch directive is used to chooses one of the element and makes it visible based on the expression.

Syntax

<div ng-switch on="variable">
    <div ng-switch-when="value1">
        <h1>Show Div1</h1>
    </div>
    <div ng-switch-when="value2">
        <h1>Show Div2</h1>
    </div>
    <div ng-switch-default>
        <h1>Show Default Div</h1>
    </div>
</div>

AngularJS ng-Switch Directive Example

<html>
<head>
<title>My first AngularJS code</title>
<Script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</Script>
</head>
<body>
<div ng-app ng-init="page=one">
<ul>
    <li><a href="#" ng-click="page='one'">Page One</a></li>
    <li><a href="#" ng-click="page='two'">Page Two</a></li>

</ul>
<div ng-switch on="page">
    <div ng-switch-when="one">
        <h1>Page One</h1>
    </div>
    <div ng-switch-when="two">
        <h1>Page Two</h1>
    </div>
    <div ng-switch-default>
        <h1>Page Default</h1>
    </div>
</div>
</div>

</body>
</html>

See Live Example

« Previous

AngularJS Code Examples

AngularJS Live Demo

ASP.NET Code Examples

Javascript Code Examples

Interview Q & A

Google MAP API Live Demo

Google MAP API Code Examples

Utility Tools

Articles

Angularjs Tutorials

Angularjs References

Angularjs Examples

AngularJS ng-Switch Directive

AngularJS ng-Switch Directive Example

Recent Articles