AngularJS ng-switch command
Display the corresponding part according to the selected value:
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body ng-app="">Site I like<select ng-model="myVar"> <option value="runooob">www.runoob.com <option value="google">www.google.com <option value="taobao">www.taobao.com</select><hr><div ng-switch="myVar"> <div ng-switch-when="runooob"> <h1>Rookie Tutorial</h1> <p>Welcome to the rookie 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>Switch</h1> <p>Select different options to display the corresponding values. </p> </div></div><hr><p> The ng-switch directive displays or hides the corresponding part based on the current value. </p></body></html>
Definition and usage
The ng-switch directive displays or hides the corresponding part according to the expression.
The corresponding child elements use the ng-switch-when directive. If the match is selected, select the display, and the others are removed.
You can set the default options by using the ng-switch-default directive. If none of them match, the default options will be displayed.
grammar
<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 property.
Parameter value
| value | describe |
|---|---|
| Expression | The expression will make the match appear and the mismatch will be removed. |
The above is a detailed introduction to the AngularJS ng-switch command. We will continue to add it later. Thank you for your support for this site!