ng-repeat基于 <select>选项
[英]ng-repeat based on <select> option
问题描述
Since I expanded my project I stumbled on a problem. 
自从我扩展项目以来，我偶然发现了一个问题。 This is my main object: 这是我的主要目的：
{
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: []
}]
}]
};
The problem lays in the select tag which is being populated this way: 问题在于以这种方式填充的选择标记：
<select ng-model="ScreenService.config.screenConfig.current">
<option
value="{{screen.id}}"
ng-repeat="screen in ConfiguratorService.screens">
{{screen.name}}
</option>
</select>
In a separate container, but in the same controller, I am repeating sections within the screens. 在一个单独的容器中，但在同一控制器中，我在屏幕中重复各节。 So I cannot do something like 所以我不能做这样的事情
ng-repeat = "screens in ConfiguratorService.screens"
ng-repeat = "sections in screens"
ng-repeat = "sectionItems in sections"
I need to repeat the sections based on the value of selected screen in dropdown. 我需要根据下拉菜单中所选屏幕的值来重复这些部分。 I would like to avoid repeating them all and hiding them since they are heavily populated, but it might be a last resort. 我想避免全部重复并隐藏它们，因为它们人口众多，但这可能是最后的选择。
Edit: Sections and sectionItems will be repeated as ul-li 编辑：Sections和sectionItems将重复为ul-li
4 个解决方案
解决方案1
5 已采纳 2016-05-03 16:42:47
Save your selected screen in a variable (by ng-model): 将您选择的屏幕保存到变量中（通过ng-model）：
<select ng-model="selectedId">
<option
value="{{screen.id}}"
ng-repeat="screen in ConfiguratorService.screens">
{{screen.name}}
</option>
</select>
In that seperate container, set the vm with ConfiguratorService.screens[selectedId] . 在单独的容器中，使用ConfiguratorService.screens[selectedId]设置虚拟机。
For the original ng-model ( ScreenService.config.screenConfig.current ), it can be set by ScreenService.config.screenConfig.current = selectedId . 对于原始ng-model （ ScreenService.config.screenConfig.current ），可以通过ScreenService.config.screenConfig.current = selectedId进行设置。
解决方案2
2 2016-05-03 16:50:28
If I understood right, I think you are looking for something like this. 如果我理解正确，我认为您正在寻找类似的东西。 You need to hook an ng-change in the select tag, find the object related to the ID selected, and just than, create you second ng-repeat . 您需要在select标签中添加一个ng-change ，找到与所选ID相关的对象，然后创建第二个ng-repeat 。
This is an example: 这是一个例子：
https://jsfiddle.net/relferreira/ja776cej/ https://jsfiddle.net/relferreira/ja776cej/
HTML: 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: 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;
}
});
}
}
解决方案3
1 2016-05-03 17:33:04
Check whether if this works for you.... 检查是否对您有用...
The Second select value will appear based on first selected Id. 第二选择值将基于第一个选择的ID出现。 So the Second select dropdown value will come only after you select the first select dropdown. 因此，只有在选择了第一个选择下拉菜单后，第二个选择下拉菜单值才会出现。
<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>
解决方案4
0 2016-05-03 16:34:16
This is how you do it using three select dropdowns: https://jsfiddle.net/u037x1dj/1/ 这是使用三个选择下拉菜单的方法： https : //jsfiddle.net/u037x1dj/1/
Definitely messy using multiple nested <optgroup> . 使用多个嵌套的<optgroup>绝对混乱。 I would re-think what you're trying to do and re-design the UI. 我会重新考虑您要做什么，并重新设计UI。 But this is how you do it: 但这是您的操作方式：
<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>
EDIT: I would have three separate dropdowns, the subsequent dropdowns would filter on what is selected before it. 编辑：我将有三个单独的下拉列表，后续的下拉列表将筛选之前选择的内容。 Use ng-disabled to disable dropdowns if there first one hasn't been selected yet. 如果尚未选择第一个下拉菜单，请使用ng-disabled禁用下拉菜单。
Screen: 屏幕：
<select ng-model="selectedScreen" ng-options="screen as screen.name for screen in screens">
</select>
Section: 部分：
<select ng-disabled="selectedScreen === null" ng-model="selectedSection" ng-options="section as section.name for section in screens.sections | filter: selectedScreen">
</select>
Section Items: 节项：
<select ng-disabled="selectedSection === null" ng-model="selectedSectionItem" ng-options="item as item.name for item in screens.sections.sectionItems | filter: selectedSection">
</select>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.