English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Display the corresponding part according to the selected value:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js></script> </head> <body ng-app=""> My favorite websites <select ng-model="myVar"> <option value="w3codebox">www.oldtoolbag.com <option value="google">www.google.com <option value="taobao">www.taobao.com </select> <hr> <div ng-switch="myVar"> <div ng-switch-when="w"3codebox"> <h1>Basic Tutorial</h1> <p>Welcome to Basic Tutorial</p> </div> <div ng-switch-when="google"> <h1>Google</h1> <p>Welcome to Google</p> </div> <div ng-switch-when="taobao"> <h1>Taobao</h1> <p>Welcome to Taobao</p> </div> <div ng-switch-default> <h1>Toggle</h1> <p>Select different options to display the corresponding values.</p> </div> </div> <hr> <p> ng-The switch directive displays or hides the corresponding part based on the current value.</p> </body> </html>Test and see ‹/›
ng-switch Directive displays or hides the corresponding part based on the expression.
The corresponding child elements use ng-switch-when directive, if the selected option matches, it will be displayed, and the others will be removed.
You can use ng-switch-default Directive sets the default option, which will be displayed if no matches are found.
< ng-switch=""> < ng-switch-when=""></> < ng-switch-when=""></> < ng-switch-when=""></> < ng-switch-default></> </>
The <form> element supports this attribute.
| Value | Description |
|---|---|
| expression | Expressions will display the matched items and remove the unmatched ones. |