编程 Javascript

AngularJS基础 ng-switch 指令简单示例

Posted in Javascript onAugust 03, 2016

AngularJS ng-switch 指令

根据选中的值显示对应部分:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="">
我喜欢的网站
<select ng-model="myVar">
 <option value="runoob">www.runoob.com
 <option value="google">www.google.com
 <option value="taobao">www.taobao.com
</select>

<hr>
<div ng-switch="myVar">
 <div ng-switch-when="runoob">
   <h1>菜鸟教程</h1>
   <p>欢迎访问菜鸟教程</p>
 </div>
 <div ng-switch-when="google">
   <h1>Google</h1>
   <p>欢迎访问Google</p>
 </div>
 <div ng-switch-when="taobao">
   <h1>淘宝</h1>
   <p>欢迎访问淘宝</p>
 </div>
 <div ng-switch-default>
   <h1>切换</h1>
   <p>选择不同选项显示对应的值。</p>
 </div>
</div>
<hr>

<p> ng-switch 指令根据当前的值显示或隐藏对应部分。</p>

</body>
</html>

定义和用法

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>

<form> 元素支持该属性。

参数值

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

以上就是对AngularJS ng-switch指令的详细介绍，后续继续补充，谢谢大家对本站的支持！

AngularJS基础 ng-switch 指令简单示例

- Author -

lqh

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript中令你抓狂的魔术变量

Nov 30 Javascript

浅析jQuery的链式调用之each函数

Dec 03 Javascript

js日历功能对象

Jan 12 Javascript

Javascript 实现的数独解题算法网页实例

Oct 15 Javascript

JQuery插件fancybox无法在弹出层使用左右键的解决办法

Dec 25 Javascript

深入理解JSON数据源格式

Jan 10 Javascript

jQuery手机浏览器中拖拽动作的艰难性分析

Feb 04 Javascript

jQuery Chart图表制作组件Highcharts用法详解

Jun 01 Javascript

vue中添加mp3音频文件的方法

Mar 02 Javascript

vue awesome swiper异步加载数据出现的bug问题

Jul 03 Javascript

详解html-webpack-plugin插件(用法总结)

Sep 12 Javascript

vue-以文件流-blob-的形式-下载-导出文件操作

Aug 07 Javascript

工作中比较实用的JavaScript验证和数据处理的干货(经典)

Aug 03 #Javascript

深入浅出讲解ES6的解构

Aug 03 #Javascript

JS模拟实现方法重载示例

Aug 03 #Javascript

jQuery数组处理函数整理

Aug 03 #Javascript

功能强大的Bootstrap组件（结合js）

Aug 03 #Javascript

AngularJS基础 ng-submit 指令简单示例

Aug 03 #Javascript

一个简单的JavaScript Map实例(分享)

Aug 03 #Javascript

You might like

php中经典方法实现判断多维数组是否为空

2011/10/23 PHP

thinkphp的CURD和查询方式介绍

2013/12/19 PHP

php 字符串压缩方法比较示例

2014/01/23 PHP

php将图片文件转换成二进制输出的方法

2015/06/10 PHP

在WordPress中安装使用视频播放器插件Hana Flv Player

2016/01/04 PHP

thinkPHP中U方法加密传递参数功能示例

2018/05/29 PHP

Laravel框架之解决前端显示图片问题

2019/10/24 PHP

[原创]站长必须要知道的javascript广告代码

2007/05/30 Javascript

jQuery Study Notes学习笔记 (二)

2010/08/04 Javascript

addEventListener 的用法示例介绍

2014/05/07 Javascript

chrome下jq width()方法取值为0的解决方法

2014/05/26 Javascript

jQuery自定义滚动条完整实例

2016/01/08 Javascript

谈一谈bootstrap响应式布局

2016/05/23 Javascript

Angular2学习笔记——详解路由器模型（Router）

2016/12/02 Javascript

微信小程序开发之视频播放器 Video 弹幕弹幕颜色自定义实例

2016/12/08 Javascript

Bootstrap的modal拖动效果

2016/12/25 Javascript

Map.vue基于百度地图组件重构笔记分享

2017/04/17 Javascript

Vue.js 2.0 移动端拍照压缩图片预览及上传实例

2017/04/27 Javascript

VUE-Table上绑定Input通过render实现双向绑定数据的示例

2018/08/27 Javascript

基于js Canvas实现二次贝塞尔曲线

2018/12/25 Javascript

详解ECMAScript2019/ES10新属性

2019/12/06 Javascript

vue + el-form 实现的多层循环表单验证

2020/11/25 Vue.js

[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17

2018/08/18 DOTA

python登录pop3邮件服务器接收邮件的方法

2015/04/30 Python

在Django的上下文中设置变量的方法

2015/07/20 Python

Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围

2019/06/25 Python

使用Pycharm分段执行代码

2020/04/15 Python

Hotels.com爱尔兰：全球酒店预订

2017/02/24 全球购物

英国赛车、汽车改装和摩托车零件购物网站：Demon Tweeks

2018/10/29 全球购物

财务学生的职业生涯发展

2014/02/11 职场文书

过程装备与控制工程专业求职信

2014/07/02 职场文书

2014迎国庆标语大全

2014/09/19 职场文书

党员个人整改方案及措施

2014/10/25 职场文书

2014年银行客户经理工作总结

2014/11/12 职场文书

幼儿园教师自我评价

2015/03/04 职场文书

人民币符号

2022/02/17 杂记