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指令的详细介绍,后续继续补充,谢谢大家对本站的支持!

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 杂记