Home>

angularjs ng-switch directive

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="">
My favorite sites
<select ng-model="myvar">
 <option value="runoob">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="runoob">
   <h1>Noob Tutorial</h1>
 </div>
 <div ng-switch-when="google">
   <h1>google</h1>
 </div>
 <div ng-switch-when="taobao">
   <h1>Taobao</h1>
 </div>
 <div ng-switch-default>
   <h1>switch</h1>
   <p>Select different options to display corresponding values.
</p>
 </div>
</div>
<hr>
<p>The ng-switch directive shows or hides the corresponding part based on the current value.
</p>
</body>
</html>

Definition and usage

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

The corresponding child element uses the ng-switch-when directive. If the match is selected and displayed,Others that match are removed.

You can set the default options by using the ng-switch-default directive,If none match,The default options are 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

element supports this attribute.

Parameter value

value description
expression Expressions make matches appear,Mismatches removed.

  • Previous Android implements SMS verification code auto-fill
  • Next Knowledge of date functions in JavaScript