Latest web development tutorials

AngularJS ng-switch 指令

AngularJS 參考手冊 AngularJS參考手冊


根據選中的值顯示對應部分:

<div ng-switch="myVar">
  <div ng-switch-when="w3big">
     <h1>本教程</h1>
     <p>欢迎访问本教程</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>

嘗試一下»


定義和用法

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 >

<form> 元素支持該屬性。


參數值

描述
expression 表達式會讓匹配項顯示,不匹配項移除。

AngularJS 參考手冊 AngularJS參考手冊