AngularJS ng-switch 指令

实例

显示 HTML 的一部分，仅当它与某个值匹配时:

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body ng-app="">
我最喜欢的话题是:
<select ng-model="myVar">
  <option value="dogs">Dogs
  <option value="tuts">Tutorials
  <option value="cars">Cars
</select>
<hr>
<div ng-switch="myVar">
  <div ng-switch-when="dogs">
     <h2>Dogs</h2>
     <p>Welcome to a world of dogs.</p>
  </div>
  <div ng-switch-when="tuts">
     <h2>Tutorials</h2>
     <p>Learn from examples.</p>
  </div>
  <div ng-switch-when="cars">
     <h2>Cars</h2>
     <p>Read about cars.</p>
  </div>
  <div ng-switch-default="">
     <h2>Switch</h2>
     <p>从下拉列表中选择主题，以切换此 DIV 的内容。</p>
  </div>
</div>
<hr>
<p>ng-switch 指令根据特定值隐藏和显示 HTML。</p>
</body>
</html>

运行一下

定义与用法

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>

由所有 HTML 元素支持。

参数值

值	描述
expression	一个表达式，它将删除不匹配的元素，并显示匹配的元素

AngularJS ng-switch 指令

实例

定义与用法

语法

参数值

分类导航