AngularJS ng-switchDirective

AngularJS 参考手册AngularJS Reference Manual

Display the corresponding part based on the selected value:

<div ng-switch="myVar">
  <div ng-switch-when="example">
     <h1>Example</h1>
     <p>欢迎访问Example</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>

Try it Yourself »

Definition and Usage

ng-switchThe directive shows or hides the corresponding part according to the expression.

The corresponding child elements use theng-switch-whendirective. If it matches the selected choice, it is displayed; otherwise, it is removed.

You can use theng-switch-defaultdirective to set a default option. If none of the cases match, the default option will be displayed.

Syntax

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

The <form> element supports this attribute.

Parameter Values

Value Description
expression The expression displays matching items and removes non-matching items.

AngularJS 参考手册AngularJS Reference Manual

Other Extensions