转自：https://www.cnblogs.com/best/tag/Angular/

根据作用域表达式动态切换把那个DOM元素包含在已经编译的模板中。

示例代码：

<!DOCTYPE html>

<!--指定angular管理的范围-->

<html ng-app="app01">

    <head>

        <meta charset="UTF-8">

        <title>指令</title>

    </head>

    <body>

        <!--指定控制器的作用范围-->

        <form ng-controller="Controller1" name="form1" ng-init="color='orangered'">

            请输入颜色：<input ng-model="color" />

            <p ng-switch="color" ng-style="{'color':color}">

                <span ng-switch-when="red">红色</span>

                <span ng-switch-when="green">绿色</span>

                <span ng-switch-when="blue">蓝色</span>

                <span ng-switch-default>输入错误，请输入red,green,blue</span>

            </p>

        </form>

        <!--引入angularjs框架-->

        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            //定义模块，指定依赖项为空

            var app01 = angular.module("app01", []);

            //定义控制器，指定控制器的名称，$scope是全局对象

            app01.controller("Controller1", function($scope) {});

        </script>

    </body>

</html>

运行结果：

12.ng-switch的更多相关文章

  1. 2019.12.10 switch（）{ case： }

    if 适合判断范围 switch 适合判断某个值 两种方法: import java.util.Scanner; class Demo02 { public static void main(Stri ...

  2. How to create vlan on Linux (with Cisco Catalyst Switch)

    In this article I want to share to you on how to create and configure vlan on Linux through Cisco Ca ...

  3. python学习笔记12 ----线程、进程

    进程和线程的概念 进程和线程是操作系统中两个很重要的概念,对于一般的程序,可能有若干个进程,每一个进程有若干个同时执行的线程.进程是资源管理的最小单位,线程是程序执行的最小单位(线程可共享同一进程里的 ...

  4. switch/ifelse 使用总结

    2015年3月30日 14:12:36 switch 中的 default  和 if/else  中最后的 else 尽可能的不要用 1. 不要default, 不要写默认处理逻辑, default ...

  5. 12.python进程\协程\异步IO

    进程 创建进程 from multiprocessing import Process import time def func(name): time.sleep(2) print('hello', ...

  6. 5分钟了解Java 12 八大新特性

    Java 12 终于发布了,我们一起来看一看 Java 12 中的新特性.通过本文可以在5分钟内快速了解 Java 12 新特性. 1 Switch 表达式 使用Java 12,switch不仅可以作 ...

  7. Java12新特性 -- switch表达式

    传统switch表达式的弊端: 匹配是自上而下的,如果忘记写break, 后面的case语句不论匹配与否都会执行: 所有的case语句共用一个块范围,在不同的case语句定义的变量名不能重复: 不能在 ...

  8. python基础-12 多线程queue 线程交互event 线程锁 自定义线程池 进程 进程锁 进程池 进程交互数据资源共享

    Python中的进程与线程 学习知识,我们不但要知其然,还是知其所以然.你做到了你就比别人NB. 我们先了解一下什么是进程和线程. 进程与线程的历史 我们都知道计算机是由硬件和软件组成的.硬件中的CP ...

  9. Java 12 新特性

    Java 12 已如期于 3 月 19 日正式发布,此次更新是 Java 11 这一长期支持版本发布之后的一次常规更新,截至目前,Java 半年为发布周期,并且不会跳票承诺的发布模式,已经成功运行一年 ...

  10. neo1973 audio subsystem

    fhttp://wiki.openmoko.org/wiki/Neo_1973_audio_subsystem using Bluetooth headset with GSM NOTE none o ...

随机推荐

  1. nginx编译支持HTTP2.0

    nginx编译支持HTTP2.0 nginx编译支持HTTP2.0 wget https://www.openssl.org/source/openssl-1.1.0i.tar.gz #openssl ...

  2. URL长链接转换为短链接

    URL长链接转换为段链接的工具非常多,可是.小编还是要给大家唠一种方法的: 操作过程例如以下,打开腾讯微博或者其它微,将自己的URL地址值按图片操作:

  3. Crytek的幕后花絮

    无论是哪种公司规模和状态.Xsolla都能够为其提供定制化的服务.我们提供定制化的技术集成,而不是提供一系列的解决方式.由于我们致力于满足每个合作伙伴的需求.整套的解决方式还存在着一系列的潜在隐患,我 ...

  4. Centos7+httpd+fastcgi+rails安装

    搭建的环境: centos7 Apache/2.4.6 fastcgi2.4.6 rails4 在安装fastcgi的时候遇到了问题: 问题: .... .. In file included fro ...

  5. 树莓派安装node.js

    因为树莓派是arm架构,node.js上并没有提供arm架构的二进制包下载. 试过使用apt包管理安装和直接node.js源代码编译安装(编译了四五个小时...),都没有成功,报非法指令错误,预计还是 ...

  6. so near yet so far

    Dear little yang So beautiful boy as you, the most beautiful boy is you who i ever saw, like a sun , ...

  7. jsp留言板雏形

    编写一个简单的留言簿,实现添加留言和显示留言内容的功能 <%@ page language="java" contentType="text/html; chars ...

  8. Struts2的struts.xml的标准配置文档

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC "-/ ...

  9. numa 和 mysql

    cpu numa结构反应的内存访问速度问题: 在多核cpu的时代引入了cpu的numa(非一致内存访问结构): NUMA引入了node的概念,每个物理CPU都被视作一个node,而每个node都有一个 ...

  10. Passpoint R1

    Passpoint R1 自从 Android 6.0 支持从网络下载包含配置文件和凭据信息的特殊文件来配置 Passpoint R1(第 1 版)凭据,Android 就一直支持 Passpoint ...