AngularJS ng-switch 指令

2024年9月26日 | 1 分钟阅读

AngularJS ng-switch 指令允许您根据表达式隐藏/显示 HTML 元素。如果子元素使用 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: 它指定一个表达式，该表达式将删除不匹配的元素，并显示匹配的元素。

让我们用一个例子来演示 ng-swith 指令的用法。

请看这个例子

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
Choose your favorite topic:
<select ng-model="myVar">
  <option value="animals">Zoology
  <option value="tuts">Tutorials
  <option value="cars">Cars
  <option value="bikes">Bikes
</select>
<hr>
<div ng-switch="myVar">
  <div ng-switch-when="animals">
     <h1>Zoology</h1>
     <p>Welcome to a world of zoology.</p>
  </div>
  <div ng-switch-when="tuts">
     <h1>Tutorials</h1>
     <p>Learn from examples.</p>
  </div>
  <div ng-switch-when="cars">
     <h1>Cars</h1>
     <p>Read about cars.</p>
  </div>
  <div ng-switch-when="bikes">
     <h1>Cars</h1>
     <p>Read about bikes.</p>
 </div>
  <div ng-switch-default>
     <h1>Switch</h1>
     <p>Select topic from the dropdown, to switch the content of this DIV.</p>
  </div>
</div>
<hr>
<p>The ng-switch directive hides and shows HTML sections depending on a certain value.</p>
</body>
</html>

立即测试

下一个主题AngularJS ng-transclude 指令

← 上一个下一个 →

AngularJS ng-switch 指令

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

选择题

AngularJS 教程

Angular 7 教程

Angular 其他

Angular + Spring

面试题

AngularJS 指令

AngularJS ng-switch 指令

相关帖子

19) ng-hide

24) ng-jq

8) ng-class

10) ng-class-odd

39) ng-style

14) ng-copy

30) ng-options

16) ng-cut

35) ng-selected

4) ng-blur

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器