AngularJS ng-switch指令

AngularJS中的ng-switch指令是用来指定在HTML DOM中显示/隐藏子元素的条件。只有当ng-switch指令中的表达式返回true时，HTML元素才会被显示，否则它将被隐藏。它被所有的HTML元素所支持。

语法:

<element ng-switch="expression">
      <element ng-switch-when="value"> Contents... </element>
      <element ng-switch-when="value"> Contents... </element>
      <element ng-switch-default> Contents... </element>
</element>

参数：

expression:它指定该元素已经匹配并将被显示，否则将被丢弃。

例子1：这个例子使用ng-switch指令来切换元素。

<!DOCTYPE html>
<html>
 
<head>
    <title>ng-switch Directive</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">
    </script>
</head>
 
<body ng-app="">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h2>ng-switch Directive</h2>
    <div>
        <form>
            <label>
                <input type="radio"
                       value="search"
                       ng-model="switch.Data">
                Searching Algorithms
            </label>
            <label>
                <input type="radio"
                       value="sort"
                       ng-model="switch.Data">
                Sorting Algorithms
            </label>
        </form>
 
        <div ng-switch="switch.Data" id="wrapper">
            <div ng-switch-when="search">
                <h2> Searching Algorithms</h2>
                <ul>
                    <li>Binary Search
                    <li>Linear Search
                </ul>
            </div>
            <div ng-switch-when="sort">
                <h2>Sorting Algorithms</h2>
                <ul>
                    <li>Merge Sort
                    <li>Quick Sort
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

输出:

AngularJS ng-switch指令

示例2：本例使用ng-switch指令显示输入的数字。

<!DOCTYPE html>
<html>
 
<head>
    <title>ng-switch Directive</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">
    </script>
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
 
<body ng-app="" style="text-align:center;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h2>ng-switch Directive</h2>
    <div>
        <div class="col-md-3">
            Type Number(1-2):
            <input ng-model="number" type="number" />
        </div><br>
        <div ng-switch="number" class="col-md-3">
            <div ng-switch-when="1" class="btn btn-danger">
                You entered {{number}}
            </div>
            <div ng-switch-when="2" class="btn btn-primary">
                You entered {{number}}
            </div>
            <div ng-switch-default class="well">
                This is the default section.
            </div>
        </div>
    </div>
</body>
</html>