1 <!DOCTYPE html> 2 <html ng-app="a2_15"> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>select控制項</title> 6 <script src="js/angular.js" type="te ...
1 <!DOCTYPE html>
2 <html ng-app="a2_15">
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>select控制項</title>
6 <script src="js/angular.js" type="text/javascript"></script>
7 <style type="text/css">
8 body {
9 font-size: 22px;
10 }
11 </style>
12
13
14 </head>
15 <body>
16 <form name="temp_form" ng-controller="c2_15">
17 <div>學制：
18 <select ng-model="a"
19 ng-options="v.id as v.name for v in a_data"
20 ng-change="a_change(a)">
21 <option value=""></option>
22 </select>
23 <span>{{a_show}}</span>
24 </div>
25 <div>班級：
26 <select ng-model="b"
27 ng-options="v.id as v.name group by v.grade for v in b_data"
28 ng-change="b_change(b)">
29 <option value="">請選擇</option>
30 </select>
31 <span>{{b_show}}</span></div>
32 </form>
33
34
35 </body>
36
37
38 <script type="text/javascript">
39 var a2_15 = angular.module("a2_15", []);
40 a2_15.controller("c2_15", ['$scope', function ($scope) {
41 $scope.a_data = [
42 {id: "1001", name: "小學"},
43 {id: "1002", name: "中學"},
44 {id: "1003", name: "大學"}
45 ];
46 $scope.b_data = [
47 {id: "1001", name: "(1)班", grade: "一年級"},
48 {id: "1002", name: "(2)班", grade: "二年級"},
49 {id: "1003", name: "(3)班", grade: "三年級"},
50 {id: "1004", name: "(4)班", grade: "四年級"},
51 {id: "1005", name: "(5)班", grade: "五年級"}
52 ];
53 $scope.a = "";
54 $scope.b = "";
55 // $scope.a_change = function(a){
56 // $scope.a_show = "您選擇的是："+a;
57 // }
58 // $scope.b_change = function(b){
59 // $scope.b_show = "您選擇的是："+b;
60 // }
61 }]);
62
63 </script>
64
65 </html>
View Code
<!DOCTYPE html>
<html ng-app="a2_15">
<head lang="en">
<meta charset="UTF-8">
<title>select控制項</title>
<script src="js/angular.js" type="text/javascript"></script>
<style type="text/css">
body {
font-size: 22px;
}
</style>
</head>
<body>
<form name="temp_form" ng-controller="c2_15">
<div>學制：
<select ng-model="a"
ng-options="v.id as v.name for v in a_data"
ng-change="a_change(a)">
<option value=""></option>
</select>
<span>{{a_show}}</span>
</div>
<div>班級：
<select ng-model="b"
ng-options="v.id as v.name group by v.grade for v in b_data"
ng-change="b_change(b)">
<option value="">請選擇</option>
</select>
<span>{{b_show}}</span></div>
</form>
</body>
<script type="text/javascript">
var a2_15 = angular.module("a2_15", []);
a2_15.controller("c2_15", ['$scope', function ($scope) {
$scope.a_data = [
{id: "1001", name: "小學"},
{id: "1002", name: "中學"},
{id: "1003", name: "大學"}
];
$scope.b_data = [
{id: "1001", name: "(1)班", grade: "一年級"},
{id: "1002", name: "(2)班", grade: "二年級"},
{id: "1003", name: "(3)班", grade: "三年級"},
{id: "1004", name: "(4)班", grade: "四年級"},
{id: "1005", name: "(5)班", grade: "五年級"}
];
$scope.a = "";
$scope.b = "";
// $scope.a_change = function(a){
// $scope.a_show = "您選擇的是："+a;
// }
// $scope.b_change = function(b){
// $scope.b_show = "您選擇的是："+b;
// }
}]);
</script>
</html>
