案例:AngularJS案例     状态:可编辑再运行    进入竖版
 运行结果 
x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<script src="/js/angular.js1.4.6/angular.min.js"></script>
6
</head>
7
<body ng-app="">
8
我喜欢的网站
9
<select ng-model="myVar">
10
  <option value="W3xue">www.w3xue.com
11
  <option value="google">www.google.com
12
  <option value="taobao">www.taobao.com
13
</select>
14
15
<hr>
16
<div ng-switch="myVar">
17
  <div ng-switch-when="W3xue">
18
     <h1>W3xue教程</h1>
19
     <p>欢迎访问W3xue教程</p>
20
  </div>
21
  <div ng-switch-when="google">
22
     <h1>Google</h1>
23
     <p>欢迎访问Google</p>
24
  </div>
25
  <div ng-switch-when="taobao">
26
     <h1>淘宝</h1>
27
     <p>欢迎访问淘宝</p>
28
  </div>
29
  <div ng-switch-default>
30
     <h1>切换</h1>
31
     <p>选择不同选项显示对应的值。</p>
32
  </div>
33
</div>
34
<hr>
35
36
<p> ng-switch 指令根据当前的值显示或隐藏对应部分。</p>
37
38
</body>
39
</html>
40