<!DOCTYPE html>

<html ng-app="a2_12">

    <head>

        <meta charset="utf-8">

        <title></title>

        <script type="text/javascript" src="../js/angularJs-1.2.16-min.js"></script>

        <style type="text/css">

            body{

                font-size: 12px;

            }

            ul{

                list-style-type: none;

                width: 408px;

                margin: 0px;

                padding: 0px;

            }

            div{

                margin: 8px 0px;

            }

        </style>

    </head>

    <body>

        <div ng-controller="c2_12">

            <div ng-show="{{isShow}}">陶国荣</div>

            <div ng-hide="{{isHide}}">1012@qq.con</div>

            <ul ng-switch on={{switch}}>

                <li ng-switch-when="1">11111111111111111</li>

                <li ng-switch-when="2">22222222222222222</li>

                <li ng-switch-default>33333333333333333</li>

            </ul>

        </div>

        <script type="text/javascript">

            var a2_12 = angular.module('a2_12', []);

            a2_12.controller('c2_12', ['$scope', function($scope) {

                $scope.isShow=true;

                $scope.isHide=false;

                $scope.switch=2;

            }]);

        </script>

    </body>

</html>

ng-switch指令的功能是显示匹配成功的元素,该指令需要结合ng-switch-when和ng-switch-default指令使用.

当指定的on值与某个或多个添加ng-switch-when指令的元素匹配时,这些元素显示,未匹配到的元素的隐藏.

如果没有找到与on值相匹配的元素时,则显示添加了ng-switch-default指令的元素.

angularJs中的隐藏和显示的更多相关文章

  1. Flex中TabNavigator隐藏和显示选项卡

    1.问题背景 遇到这样一个问题:有四个Tab选项卡,根据不同的参数隐藏和显示选项卡 2.实现实例 (1)隐藏"春季" protected function springClickH ...

  2. 【转】listView中，checkBox的显示和隐藏

    原文网址:http://www.cnblogs.com/vicma/p/3460500.html 在listView中,每个item都有一个ChexBox,当显示的时候在listView外面设置一个按 ...

  3. JavaScript中如何给按钮设置隐藏与显示属性

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.html * 作者:常轩 * 微信公众号:Worldh ...

  4. 【jquery隐藏、显示事件and提示callback】【淡入淡出fadeToggle】【滑入滑出slideToggle】【动画animate】【停止动画stop】

    1.jquery隐藏and显示事件 $("p").hide();      //隐藏事件$("p").hide(1000);  //1秒内缓慢隐藏$(" ...

  5. AngularJS中实现显示或隐藏动画效果的3种方式

    本篇体验在AngularJS中实现在"显示/隐藏"这2种状态切换间添加动画效果. 通过CSS方式实现显示/隐藏动画效果 思路: →npm install angular-anima ...

  6. angularjs中只显示选中的radio的值

    angularjs中,只显示选中的radio的值.主要是相同的radio,name属性值要相同还有ng-model的值要相同,同时要指定value值.这样选中的时候就会在下面的div中显示选中的值了. ...

  7. C# 如何隐藏或显示工作表中的网格线

    我们知道Excel中有许多虚线形式的网格线,它们用于区分Excel工作表中的单元格.有了网格线,读者可以轻松地查看和核对工作表中的数据.Excel工作表中,网格线是默认存在的,但我们可以根据自身的需求 ...

  8. Android中系统键盘的自动弹出、隐藏和显示

    一.需求 在开发Android app过程中经常用到EditText,需要在界面加载完成后自动弹出系统键盘,更希望可以控制键盘的隐藏和显示,本文介绍其实现方法. 二.系统键盘的自动弹出 @Overri ...

  9. 关于Unity中的删除、显示和隐藏节点

    一.删除节点和组件 1.删除一个节点,以及节点上面所有的组件全部删除了//删除一个节点的时候,节点上面所有的组件也会被删除:MonoBehaviour.Destroy(this.gameObject) ...

随机推荐

  1. 07-Java 中的IO操作

    1.Java IO简介: (1)I/O :in \out 即输入与输出.基本功能:读写. (2)IO流:作用:读写设备上的数据,硬盘文件.内存.键盘.网络-- 根据数据的走向,可分为:输入流.输出流. ...

  2. Java 编程实践

    创建一个54个元素的整数数组,并将其元素值依次赋值为:1~54,用于表示一副牌的54张.再创建一个12个元素的整数数组,用于表示某玩家手中的牌,然后从前一数组中随机抽取12个元素赋值给该数组.打印后一 ...

  3. Android App监听软键盘按键的三种方式

    前言:   我们在android手机上面有时候会遇到监听手机软键盘按键的时候,例如:我们在浏览器输入url完毕后可以点击软键盘右下角的“GO”按键加载url页面:在点击搜索框的时候,点击右下角的sea ...

  4. java 获取实体类对象属性值的方法

    在java中我们要获得实体类对象的属性,一般情况是将实体类中的属性私有化,然后再对外提供get()与set()方法,然后再获取实体类对象的属性的时候先把对象new出来,再用变量名.get()的方法得到 ...

  5. JaxWsDynamicClientFactory弃用了，改成org.codehaus.xfire.client;

    搞了好几天jar包冲突,最后修改接口调用方式 java.lang.IllegalStateException: Unable to create JAXBContext for generated p ...

  6. java作用域-转

    java中,针对不同的修饰词,类及其类中的方法.域都有不同的可见性.以下为针对java中可见性的几点总结. 1.java中的默认包(这个包是没有名称的),对于任何修饰词来说,其中的内容只能对其包内类为 ...

  7. C语言strlen函数和sizeof操作符

    字符'x'于字符串"x"的区别 'x' 属于基本类型(char)字符类型-----------------由1个字符组成('x') "x"属于派生类型(char ...

  8. jsp中的内置对象（9个）、作用

    jsp内置对象 定义:可以不加声明就在JSP页面脚本(Java程序片和Java表达式)中使用的成员变量 JSP共有以下9种基本内置组件(可与ASP的6种内部组件相对应): 1.request对象 客户 ...

  9. window7 下 安装 apache24(httpd-2.4.10-x86-r2)加 php5.6（php-5.6.4-Win32-VC11-x86）加yaf（php_yaf-2.3.3-5.6-ts-vc11-x86）整合

    window7 下 安装 apache24(httpd-2.4.10-x86-r2)加 php5.6(php-5.6.4-Win32-VC11-x86)加yaf(php_yaf-2.3.3-5.6-t ...

  10. wap图片滚动特效_无css3 元素js脚本编写

    手机图片滑动切换,网上有很多这样的例子,但都借助于其他组件,让代码混乱的不行:还有就是用到css3里的 transform:translate(x,y);移动元素,不过发现在不支持css3的设备上马上 ...