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 相关文章推荐
jquery的Tooltip插件 qtip使用详细说明
Sep 08 Javascript
JavaScript传递变量: 值传递?引用传递?
Feb 22 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
Nov 19 Javascript
js用正则表达式来验证表单(比较齐全的资源)
Nov 17 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
Nov 16 Javascript
微信小程序-获得用户输入内容
Feb 13 Javascript
基于Vue 服务端Cookies删除的问题
Sep 21 Javascript
JavaScript偏函数与柯里化实例详解
Mar 27 Javascript
用vue 实现手机触屏滑动功能
May 28 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
Windows 下的 PHP-PEAR 安装方法
2010/11/20 PHP
php模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
TopList标签和JavaScript结合两例
2007/08/12 Javascript
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
通过 JS 判断页面是否有滚动条的实现方法
2018/04/05 Javascript
对Vue beforeRouteEnter 的next执行时机详解
2018/08/25 Javascript
python下调用pytesseract识别某网站验证码的实现方法
2016/06/06 Python
Python编程产生非均匀随机数的几种方法代码分享
2017/12/13 Python
python 获取毫秒数,计算调用时长的方法
2019/02/20 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
python类的实例化问题解决
2019/08/31 Python
python与pycharm有何区别
2020/07/01 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
2012/12/13 HTML / CSS
如何写出高质量、高性能的MySQL查询
2014/11/17 面试题
大三自我鉴定范文
2013/10/05 职场文书
招商经理岗位职责
2013/11/16 职场文书
机械专业毕业生推荐信范文
2013/11/25 职场文书
大学毕业感言50字
2014/02/07 职场文书
国贸专业的职业规划书
2014/03/15 职场文书
安全责任书范本
2014/04/15 职场文书
治超工作实施方案
2014/05/04 职场文书
中央空调节能方案
2014/06/15 职场文书
诚信考试标语
2014/06/24 职场文书
公司开业致辞
2015/07/29 职场文书
高中同学会致辞
2015/08/01 职场文书
详解Java实现数据结构之并查集
2021/06/23 Java/Android
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript
MySQL如何使备份得数据保持一致
2022/05/02 MySQL