AngularJS ng-switch 指令

定义和用法

ng-switch 指令允许您根据表达式隐藏/显示 HTML 元素。

如果子元素通过 ng-switch-when 指令获得匹配项，则会显示带有 ng-switch-when 指令的子元素，否则将删除该元素及其子元素。

您还可以使用 ng-switch-default 指令定义默认部分，以便在其他部分均不匹配时显示该部分。

实例

只有当它匹配某个特定值时，才显示一部分 HTML：

<div ng-switch="myVar">
  <div ng-switch-when="dogs">
    <h1>Dogs</h1>
    <p>Welcome to a world of dogs.</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-default>
    <h1>Switch</h1>
    <p>Select topic from the dropdown, to switch the content of this DIV.</p>
  </div>
</div>

亲自试一试

语法

<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 元素都支持。

参数