• 35.select控件 angularJS


     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>
  • 相关阅读:
    如何写出优秀的代码[转载]
    [转载]Java中常用日期功能综合
    JS WebBrowser 实现打印预览
    想成为优秀的技术人员你必须做到的几件事情【转载】
    JS打印
    js阿拉伯数字转中文大写
    从 SQL Server 2005 中处理 XML
    Visual Studio 2005 Express October 2004 CTP完整版本的下载
    Debug和Release的区别
    ASP.NET 中的正则表达式
  • 原文地址:https://www.cnblogs.com/mx2036/p/6924620.html
Copyright © 2020-2023  润新知