方法一：選擇屬性
<!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>