答案 0 :(得分：5)
将所选屏幕保存在变量中（通过ng-model）：
<select ng-model="selectedId">
<option
value="{{screen.id}}"
ng-repeat="screen in ConfiguratorService.screens">
{{screen.name}}
</option>
</select>
在该单独的容器中，使用ConfiguratorService.screens[selectedId]设置vm。
对于原始ng-model（ScreenService.config.screenConfig.current），可以ScreenService.config.screenConfig.current = selectedId设置。
答案 1 :(得分：2)
如果我理解正确，我认为你正在寻找这样的事情。您需要在select标记中挂钩ng-change，找到与所选ID相关的对象，然后创建第二个ng-repeat。
这是一个例子：
https://jsfiddle.net/relferreira/ja776cej/
HTML：
<div data-ng-app="app">
<div data-ng-controller="MainController as mainVm">
<select data-ng-model="mainVm.selectedScreenIndex" data-ng-change="mainVm.select()">
<option
value="{{screen.id}}"
ng-repeat="screen in mainVm.screens">
{{screen.name}}
</option>
</select>
<ul>
<li data-ng-repeat="sectionItems in mainVm.selectedItem.sections">{{sectionItems}}</li>
</ul>
</div>
</div>
JS：
angular.module('app', []);
angular.module('app')
.controller('MainController', mainController);
mainController.$inject = ['$scope'];
function mainController($scope){
var vm = this;
vm.select = select;
vm.selectedScreen = null;
vm.selectedScreenIndex = null;
vm.screens = [{
id: 0,
name: 'Screen0',
sections: [{
id: 0,
sectionItems: []
}, {
id: 1,
sectionItems: []
}, {
id: 2,
sectionItems: []
}]
}, {
id: 1,
name: 'Screen1',
sections: [{
id: 0,
sectionItems: []
}, {
id: 1,
sectionItems: []
}, {
id: 2,
sectionItems: []
}]
}, {
id: 2,
name: 'Screen2',
sections: [{
id: 0,
sectionItems: []
}, {
id: 1,
sectionItems: []
}, {
id: 2,
sectionItems: []
}]
}];
function select(){
vm.screens.forEach(function(item){
if(item.id == vm.selectedScreenIndex){
vm.selectedItem = item;
}
});
}
}
答案 2 :(得分：1)
检查这是否适合你......
第二个选择值将根据首先选择的Id显示。因此，只有在您选择第一个选择下拉列表后，才会出现第二个选择下拉值。
<html>
<head>
<title>Angular JS Controller</title>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app = "mainApp" ng-controller = "studentController">
<select ng-model="current" ng-change="captureChange(current)" ng-options="option.id as option.name for option in screens">
</select>
<select ng-model="current123" ng-options="item.id as item.name for item in Collectval" ng-change="captureItemChange(current123)">
</select>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
$scope.screens= [{
id: 0,
name: 'Screen0',
sections: [{
id: 0,
sectionItems: [
{id:1, name:"Aarthi"},{id:2, name:"Roopa"}
]
}, {
id: 1,
sectionItems: [
{id:3, name:"Chitra"},{id:4, name:"Prakash"}
]
}, {
id: 2,
sectionItems: [
{id:5, name:"Lalitha"},{id:6, name:"Sekaran"}
]
}]
}, {
id: 1,
name: 'Screen1',
sections: [{
id: 0,
sectionItems: [
{id:7, name:"Vijay"},{id:8, name:"Sethupathi"}
]
}, {
id: 1,
sectionItems: [
{id:9, name:"Aravind"},{id:10, name:"Swamy"}
]
}, {
id: 2,
sectionItems: [
{id:11, name:"Vinay"},{id:12, name:"Raja"}
]
}]
}, {
id: 2,
name: 'Screen2',
sections: [{
id: 0,
sectionItems: [
{id:13, name:"Brian"},{id:14, name:"Laura"}
]
}, {
id: 1,
sectionItems: [
{id:15, name:"Sachin"},{id:16, name:"Tendulkar"}
]
}, {
id: 2,
sectionItems: [
{id:17, name:"Rahul"},{id:18, name:"Dravid"}
]
}]
}]
$scope.Collectval=[];
$scope.captureChange = function(val){
angular.forEach($scope.screens,function(item){
if(item.id==val){
angular.forEach(item.sections, function(data){
angular.forEach(data.sectionItems, function(vval){
$scope.Collectval.push(vval);
})
})
}
})
};
console.log($scope.Collectval);
$scope.captureItemChange = function(value){
//alert(value);
}
});
</script>
答案 3 :(得分：0)
您可以使用三个选择下拉列表来执行此操作： https://jsfiddle.net/u037x1dj/1/
使用多个嵌套<optgroup>绝对凌乱。我会重新考虑你要做的事情并重新设计UI。但这就是你如何做到的：
<select ng-model="myModel">
<optgroup label="screen_{{screen.id}}" ng-repeat="screen in screens">
<optgroup label="section_{{section.id}}" ng-repeat="section in screen.sections">
<option ng-repeat="sectionItem in section.sectionItems" value="sectionItem.id">{{sectionItem.name}}</option>
</optgroup>
</optgroup>
</select>
编辑：我会有三个单独的下拉列表，随后的下拉菜单会过滤之前选择的内容。如果尚未选择第一个下拉列表，请使用ng-disabled禁用下拉列表。
<强>屏幕：
<select ng-model="selectedScreen" ng-options="screen as screen.name for screen in screens">
</select>
栏目：
<select ng-disabled="selectedScreen === null" ng-model="selectedSection" ng-options="section as section.name for section in screens.sections | filter: selectedScreen">
</select>
部分项目：
<select ng-disabled="selectedSection === null" ng-model="selectedSectionItem" ng-options="item as item.name for item in screens.sections.sectionItems | filter: selectedSection">
</select>