AngularJs实现Select二级联动

最新推荐文章于 2021-08-04 07:19:15 发布

原创最新推荐文章于 2021-08-04 07:19:15 发布 · 652 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#AngularJS #Select #二级联动

angularjs 专栏收录该内容

29 篇文章

订阅专栏

本文介绍如何使用AngularJS实现下拉框的级联选择功能，包括选择班级后自动更新显示该班级的学生列表，并提供了三种不同的实现方法，通过选择属性、选择对象的方式展示了如何在网页中动态地进行数据过滤和选项更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一：选择属性

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