ng-switch指令

一、定义和用法

ng-switch 指令根据表达式显示或隐藏对应的部分。

对应的子元素使用 ng-switch-when 指令，如果匹配选中选择显示，其他为匹配的则移除。

你可以通过使用 ng-switch-default 指令设置默认选项，如果都没有匹配的情况，默认选项会显示。

语法

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

参数值

值	描述
expression	表达式会让匹配项显示，不匹配项移除。

二、实例1，ng-switch控制显示或移除Dom

html：

<div class="container" ng-app="myApp" ng-init="range=1">
    <h3>ng-switch实例</h3>
    <p>
        选择范围:
        <label>1-3:<input type="radio" ng-model="range" name="range" value="1" /></label>
        <label>4:<input type="radio" ng-model="range" name="range" value="2" /></label>
        <label>5:<input type="radio" ng-model="range" name="range" value="3" /></label>
    </p>
    <ul class="list-group" ng-switch="range">
        <li class="list-group-item" ng-switch-when="1">Item1</li>
        <li class="list-group-item" ng-switch-when="1">Item2</li>
        <li class="list-group-item" ng-switch-when="1">Item3</li>
        <li class="list-group-item" ng-switch-when="2">Item4</li>
        <li class="list-group-item" ng-switch-when="3">Item5</li>
    </ul>
</div>
<script>
    var app = angular.module('myApp', []);
</script>

三、实例2，ng-switch+scale-fade动画

1.引用：

<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<link href="../Content/ng-animation.css" rel="stylesheet" />
<script src="../Scripts/Angular/angular.min.js"></script>
<script src="../Scripts/Angular/angular-animate.min.js"></script>

2.css

/**控制显示容器**/
.siteContainer {
    width: 200px;
    height: 200px;
    border: 1px solid blue;
    position: relative;
}

    .siteContainer > div {
        position: absolute;
        left: 0px;
        top: 0px;
        text-align: center;
        width: 100%;
    }

3.html

<div class="container" ng-app="myApp">
    <h3 class="text-center">scale-fade动画使用实例之ng-switch</h3>
    <p>
        我喜欢的网站
        <select ng-model="sites">
            <option value="runoob">wwww.runoob.com</option>
            <option value="google">wwww.google.com</option>
            <option value="taobao">wwww.taobao.com</option>
            <option value="gongjuji">wwww.gongjuji.net</option>
        </select>
    </p>
    <div ng-switch="sites" class="siteContainer">
        <div ng-switch-when="runoob" class="scale-fade">
            <h1>菜鸟教程</h1>
            <p>欢迎访问菜鸟教程</p>
        </div>
        <div ng-switch-when="google" class="scale-fade">
            <h1>google</h1>
            <p>欢迎访问google</p>
        </div>
        <div ng-switch-when="taobao" class="scale-fade">
            <h1>taobao</h1>
            <p>欢迎访问taobao</p>
        </div>
        <div ng-switch-when="gongjuji" class="scale-fade">
            <h1>微工具集</h1>
            <p>欢迎访问微工具集</p>
        </div>
    </div>
</div>
<script>
    var app = angular.module('myApp', ['ngAnimate']);
</script>

更多：

ng-if指令

AngularJS动画（一）