<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>ee</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body>
<form name="temp_form" ng-controller="c16">
<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.group for v in b_data" ng-change="b_change(b)">
<option value="">--请选择--</option>
</select>
<span> {{b_show}} </span>
</div>
</form>
<script type="text/javascript">
var app = angular.module("app", []);
app.controller("c16", ['$scope', function($scope) {
$scope.a_data = [
{id :"1001", name :'小学'},
{id :"1002", name :'初中'},
{id :"1003", name :'高中'},
];
$scope.a_show = '';
$scope.b_show = '';
$scope.a_change = function(a) {
$scope.a_show = "您的选择是:" + a;
}
$scope.b_data = [
{id :"2001", name :'小学', group:"一年级"},
{id :"2002", name :'小学', group:"一年级"},
{id :"2003", name :'小学', group:"一年级"},
{id :"2004", name :'初中', group:"二年级"},
{id :"2005", name :'初中', group:"二年级"},
{id :"2006", name :'高中'},
{id :"2007", name :'初中', group:"三年级"},
];
$scope.b_change = function(b) {
$scope.b_show = "您的选择是:" + b;
}
}])
</script>
</body>
</html>
angularjs下拉列表 select
最新推荐文章于 2024-05-30 09:51:11 发布