天天看点
返回

AngularJs实现Select二级联动

方法一：选择属性

<!DOCTYPE html>
<html ng-app="my_app">
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
		<script type="text/javascript" src="angular.min-1.69.js"></script>
		<script type="text/javascript">
			var app = angular.module("my_app", []);
			app.controller('my_controller', function($scope) {
				window.scope = $scope;
				$scope.selectedClass = '';
				$scope.selectedStudent = '';
				/* 班级信息 */
				$scope.classes = [{
					classno: 'c001',
					classname: '1班'
				}, {
					classno: 'c002',
					classname: '2班'
				}];
				/* 学生信息 */
				$scope.students = [{
					studentno: 's001',
					studentname: '张三',
					classno: 'c001',
				}, {
					studentno: 's002',
					studentname: '李四',
					classno: 'c001',
				}, {
					studentno: 's003',
					studentname: '王五',
					classno: 'c002',
				}, {
					studentno: 's004',
					studentname: '马六',
					classno: 'c002',
				}];
				$scope.filterStudents=[];
				$scope.classChange=function(){
					$scope.selectedStudent = '';
					$scope.filterStudents=[];
					$.each($scope.students,function(i,item){
						if(item.classno==$scope.selectedClass){
							$scope.filterStudents.push(item);
						}
					});
				}
				$scope.get = function() {
					alert($scope.selectedClass + ',' + $scope.selectedStudent);
				}
			});
		</script>
	</head>
	<body ng-controller="my_controller">
		<div>
			<select ng-model='selectedClass' ng-change="classChange();">
				<option value="">请选择</option>
				<option ng-repeat="classItem in classes" 
				value="{{classItem.classno}}">{{classItem.classname}}
				</option>
			</select>
			<select ng-model='selectedStudent'>
				<option value="">请选择</option>
				<option ng-repeat="studentItem in filterStudents"
				value="{{studentItem.studentno}}">{{studentItem.studentname}}
				</option>
			</select>
			<input type="button" ng-click="get();" value="获取" />
		</div>
</html>

方法二：选择对象

<!DOCTYPE html>
<html ng-app="my_app">
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
		<script type="text/javascript" src="angular.min-1.69.js"></script>
		<script type="text/javascript">
			var app = angular.module("my_app", []);
			app.controller('my_controller', function($scope) {
				window.scope = $scope;
				/* 班级、学生信息 */
				$scope.classes = [{
						classitem: {
							classno: 'c001',
							classname: '1班'
						},
						students: [{
							studentno: 's001',
							studentname: '张三',
						}, {
							studentno: 's002',
							studentname: '李四',
						}]
					},
					{
						classitem: {
							classno: 'c002',
							classname: '2班'
						},
						students: [{
							studentno: 's003',
							studentname: '王五',
						}, {
							studentno: 's004',
							studentname: '马六',
						}]
					},
					{
						classitem: {
							classno: 'c003',
							classname: '3班'
						},
						students: []
					}
				]
				$scope.selectedClass = $scope.classes[0];
				$scope.selectedStudent = {};
				if ($scope.selectedClass.students.length > 0) {
					$scope.selectedStudent = $scope.selectedClass.students[0];
				}
				$scope.classChange = function() {
					$scope.selectedStudent = {};
					if ($scope.selectedClass.students.length > 0) {
						$scope.selectedStudent = $scope.selectedClass.students[0];
					}
				}
				$scope.get = function() {
					var resultclassno = $scope.selectedClass.classitem.classno;
					var resultstudentno = $scope.selectedStudent.studentno == undefined 
					? '' : $scope.selectedStudent.studentno
					alert(resultclassno + ',' + resultstudentno);
				}
			});
		</script>
	</head>
	<body ng-controller="my_controller">
		<div>
			<select ng-model="selectedClass" 
			ng-options="item.classitem.classname for item in classes" 
			ng-change="classChange();"></select>
			<select ng-model="selectedStudent" 
			ng-options="item.studentname for item in selectedClass.students"></select>
			<input type="button" ng-click="get();" value="获取" />
		</div>
</html>

方法3：选择对象

<!DOCTYPE html>
<html ng-app="my_app">
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
		<script type="text/javascript" src="angular.min-1.69.js"></script>
		<script type="text/javascript">
			var app = angular.module("my_app", []);
			app.controller('my_controller', function($scope) {
				window.scope = $scope;
				/* 班级、学生信息 */
				$scope.classes = [{
						classno: 'c001',
						classname: '1班',
						students: [{
							studentno: 's001',
							studentname: '张三',
						}, {
							studentno: 's002',
							studentname: '李四',
						}]
					},
					{
						classno: 'c002',
						classname: '2班',
						students: [{
							studentno: 's003',
							studentname: '王五',
						}, {
							studentno: 's004',
							studentname: '马六',
						}]
					},
					{
						classno: 'c003',
						classname: '3班',
						students: []
					}
				]
				$scope.selectedClass = $scope.classes[0];
				$scope.selectedStudent = {};
				if ($scope.selectedClass.students.length > 0) {
					$scope.selectedStudent = $scope.selectedClass.students[0];
				}
				$scope.classChange = function() {
					$scope.selectedStudent = {};
					if ($scope.selectedClass.students.length > 0) {
						$scope.selectedStudent = $scope.selectedClass.students[0];
					}
				}
				$scope.get = function() {
					var resultclassno = $scope.selectedClass.classno;
					var resultstudentno = $scope.selectedStudent.studentno == undefined ?
						'' : $scope.selectedStudent.studentno
					alert(resultclassno + ',' + resultstudentno);
				}
			});
		</script>
	</head>
	<body ng-controller="my_controller">
		<div>
			<select ng-model="selectedClass" 
			ng-options="item.classname for item in classes" 
			ng-change="classChange();"></select>
			<select ng-model="selectedStudent" 
			ng-options="item.studentname for item in selectedClass.students"></select>
			<input type="button" ng-click="get();" value="获取" />
		</div>
</html>
angularjs select 二级联动
上一篇: 可别在代码种写那么多魔法值了，脑壳疼！
下一篇: 后端---java中堆外内存详解

继续阅读