编程 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 相关文章推荐

jQuery实现的多选框多级联动插件

May 02 Javascript

javascript获取checkbox复选框获取选中的选项

Aug 12 Javascript

JavaScript操作cookie类实例

Mar 31 Javascript

JavaScript实现随机替换图片的方法

Apr 16 Javascript

基于javascript实现彩票随机数生成（简单版）

Apr 17 Javascript

Node.js编写组件的三种实现方式

Feb 25 Javascript

javascript css红色经典选项卡效果实现代码

May 17 Javascript

javascript中数组（Array)对象和字符串（String)对象的常用方法总结

Dec 15 Javascript

js编写三级联动简单案例

Dec 21 Javascript

微信禁止下拉查看URL的处理方法

Sep 28 Javascript

Vue-router 切换组件页面时进入进出动画方法

Sep 01 Javascript

原生JS实现多条件筛选

Aug 19 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生成gif动画的方法

2015/11/05 PHP

php接口实现拖拽排序功能

2018/04/23 PHP

PHP基于curl实现模拟微信浏览器打开微信链接的方法示例

2019/02/15 PHP

学习YUI.Ext第七日-View&JSONView Part Two-一个画室网站的案例

2007/03/10 Javascript

JavaScript 对象模型执行模型

2009/12/06 Javascript

基于jquery的地址栏射击游戏代码

2011/03/10 Javascript

jquery slibings选取同级其他元素的实现代码

2013/11/15 Javascript

js操作滚动条事件实例

2015/01/29 Javascript

js实现头像图片切割缩放及无刷新上传图片的方法

2015/07/17 Javascript

详解JavaScript中数组和字符串的lastIndexOf()方法使用

2016/03/13 Javascript

浅析JavaScript Array和string的转换(推荐)

2016/05/20 Javascript

AngularJS入门教程之迭代器过滤详解

2016/08/18 Javascript

jQuery表单验证简单示例

2016/10/17 Javascript

浅谈js算法和流程控制

2016/12/29 Javascript

轻松实现jQuery添加删除按钮Click事件

2017/03/13 Javascript

ES6新特性八：async函数用法实例详解

2017/04/21 Javascript

Angular2+如何去除url中的#号详解

2017/12/20 Javascript

vue脚手架中配置Sass的方法

2018/01/04 Javascript

实战node静态文件服务器的示例代码

2018/03/08 Javascript

微信小程序网络层封装的实现（promise, 登录锁）

2019/05/08 Javascript

Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置

2019/05/27 Javascript

php结合js实现多条件组合查询

2019/05/28 Javascript

Vue实现点击显示不同图片的效果

2019/08/10 Javascript

[01:34:42]NAVI vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15

2019/08/17 DOTA

Python中利用sorted()函数排序的简单教程

2015/04/27 Python

python实现判断数组是否包含指定元素的方法

2015/07/15 Python

使用Python的Twisted框架编写非阻塞程序的代码示例

2016/05/25 Python

Python利用Django如何写restful api接口详解

2018/06/08 Python

利用Django提供的ModelForm增删改数据的方法

2019/01/06 Python

python中的TCP(传输控制协议)用法实例分析

2019/11/15 Python

Python pygame绘制文字制作滚动文字过程解析

2019/12/12 Python

详解Html5中video标签那些属性和方法

2019/07/01 HTML / CSS

开发人员所需要知道的HTML5性能分析面面观

2012/07/05 HTML / CSS

酒店员工辞职信范文

2015/02/28 职场文书

试用期自我评价怎么写

2015/03/10 职场文书

2015年教师节广播稿

2015/08/19 职场文书