代码改变世界

35.select控件 angularJS

2017-05-31 15:58  笨笨03  阅读(339)  评论(4)  编辑  收藏  举报 
 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>