AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

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

51自学网 http://www.wanshiok.com
AngularJS,ng-switch,指令详解,ng-switch,指令,ng-switch

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,指令详解,ng-switch,指令,ng-switch  
上一篇:JS简单获取及显示当前时间的方法  下一篇:工作中比较实用的JavaScript验证和数据处理的干货(经典)