ng-switch指令-白红宇

ng-switch指令

阅读量：4288 次

发布时间：2019-05-27

本文共 1481 字，大约阅读时间需要 4 分钟。

一、定义和用法

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：


       
    ng-switch实例
    
            选择范围:        1-3:        4:        5:    
    
            
     Item1
        
     Item2
        
     Item3
        
     Item4
        
     Item5

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

1.引用：

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


       
    scale-fade动画使用实例之ng-switch
    
            我喜欢的网站            
    
            
                 
      菜鸟教程
            
      欢迎访问菜鸟教程
        
     
        
                 
      google
            
      欢迎访问google
        
     
        
                 
      taobao
            
      欢迎访问taobao
        
     
        
                 
      微工具集
            
      欢迎访问微工具集