本文主要讲解 AngularJS ng-switch 指令, 这里对 ng-switch 指令的基础资料做了详细整理,并附代码示例,有兴趣的小伙伴可以参考下
AngularJS 诞生于 Google 是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。
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>
- </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>
参数值
值 | 描述 |
---|---|
expression | 表达式会让匹配项显示,不匹配项移除。 |
来源: http://www.phperz.com/article/17/0309/263837.html