angularjs下拉列表 select

最新推荐文章于 2024-05-30 09:51:11 发布

tyilack_小小黑

最新推荐文章于 2024-05-30 09:51:11 发布

阅读量1.5k

点赞数

分类专栏： angularjs 文章标签： javascript angularjs

本文链接：https://blog.csdn.net/u014520745/article/details/52918771

版权

angularjs 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!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>

tyilack_小小黑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
angularjs下拉列表 select

ee 学制： --请选择-- {{a_show}} 班级： --请选择-- {{b_show}} var app = angular.module("app", []); app.controller("c16", ['$scope', function($scope) { $scope.a_da
复制链接

扫一扫

专栏目录