编程 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 读取XML数据，在页面中展现、编辑、保存的实现

Oct 27 Javascript

jquery keypress,keyup,onpropertychange键盘事件

Jun 25 Javascript

js+css在交互上的应用

Jul 18 Javascript

jQuery中创建实例与原型继承揭秘

Dec 21 Javascript

jquery.ajax之beforeSend方法使用介绍

Dec 08 Javascript

jquery实现鼠标滑过后动态图片提示效果实例

Aug 10 Javascript

jQuery+HTML5加入购物车代码分享

Oct 29 Javascript

javascript滚轮控制模拟滚动条

Oct 19 Javascript

JS原生带小白点轮播图实例讲解

Jul 22 Javascript

vue实现父子组件之间的通信以及兄弟组件的通信功能示例

Jan 29 Javascript

微信小程序点餐系统开发常见问题汇总

Aug 06 Javascript

element-ui如何防止重复提交的方法步骤

Dec 09 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

本地计算机无法启动Apache故障处理

2014/08/08 PHP

常用PHP框架功能对照表

2014/10/23 PHP

php删除左端与右端空格的方法

2014/11/29 PHP

thinkPHP实现瀑布流的方法

2014/11/29 PHP

PHP里8个鲜为人知的安全函数分析

2014/12/09 PHP

php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)

2016/05/12 PHP

PHP实现将多个文件压缩成zip格式并下载到本地的方法示例

2018/05/23 PHP

laravel 修改记住我功能的cookie保存时间的方法

2019/10/14 PHP

左右悬浮可分组的网站QQ在线客服代码(可谓经典)

2012/12/21 Javascript

Javascript级联下拉菜单以及AJAX数据验证核心代码

2013/05/10 Javascript

js如何实现设计模式中的模板方法

2013/07/23 Javascript

一个仿糯米弹框效果demo

2014/07/22 Javascript

原生JavaScript编写俄罗斯方块

2015/03/30 Javascript

jQuery+jsp实现省市县三级联动效果(附源码)

2015/12/03 Javascript

轻松搞定jQuery.noConflict()

2016/02/15 Javascript

JS基于开关思想实现的数组去重功能【案例】

2019/02/18 Javascript

环形加载进度条封装（Vue插件版和原生js版）

2019/12/04 Javascript

JS遍历树层级关系实现原理解析

2020/08/31 Javascript

Vue向后台传数组数据,springboot接收vue传的数组数据实例

2020/11/12 Javascript

[01:37]PWL S2开团时刻DAY1&2——这符有毒

2020/11/20 DOTA

python列表操作使用示例分享

2014/02/21 Python

python中urlparse模块介绍与使用示例

2017/11/19 Python

Django 浅谈根据配置生成SQL语句的问题

2018/05/29 Python

详解将Django部署到Centos7全攻略

2018/09/26 Python

Python实现的爬取百度文库功能示例

2019/02/16 Python

Python自动采集微信联系人的实现示例

2020/02/28 Python

Pycharm中切换pytorch的环境和配置的教程详解

2020/03/13 Python

Python 程序员必须掌握的日志记录

2020/08/17 Python

英国乐购杂货：Tesco Groceries

2018/11/29 全球购物

一套Java笔试题

2016/08/20 面试题

给导游的表扬信

2014/01/10 职场文书

关于工资低的辞职信

2014/01/14 职场文书

元旦晚会感言

2014/03/12 职场文书

创先争优标语

2014/06/27 职场文书

酒桌上的开场白

2015/06/01 职场文书

两行代码解决Jupyter Notebook中文不能显示的问题

2021/04/24 Python