ng-repeat基於 <select>選項
[英]ng-repeat based on <select> option
問題描述
自從我擴展項目以來，我偶然發現了一個問題。 這是我的主要目的：
{
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: []
}]
}]
};
問題在於以這種方式填充的選擇標記：
<select ng-model="ScreenService.config.screenConfig.current">
<option
value="{{screen.id}}"
ng-repeat="screen in ConfiguratorService.screens">
{{screen.name}}
</option>
</select>
在一個單獨的容器中，但在同一控制器中，我在屏幕中重復各節。 所以我不能做這樣的事情
ng-repeat = "screens in ConfiguratorService.screens"
ng-repeat = "sections in screens"
ng-repeat = "sectionItems in sections"
我需要根據下拉菜單中所選屏幕的值來重復這些部分。 我想避免全部重復並隱藏它們，因為它們人口眾多，但這可能是最后的選擇。
編輯：Sections和sectionItems將重復為ul-li
4 個解決方案
解決方案1
5 已采納 2016-05-03 16:42:47
將您選擇的屏幕保存到變量中（通過ng-model）：
<select ng-model="selectedId">
<option
value="{{screen.id}}"
ng-repeat="screen in ConfiguratorService.screens">
{{screen.name}}
</option>
</select>
在單獨的容器中，使用ConfiguratorService.screens[selectedId]設置虛擬機。
對於原始ng-model （ ScreenService.config.screenConfig.current ），可以通過ScreenService.config.screenConfig.current = selectedId進行設置。
解決方案2
2 2016-05-03 16:50:28
如果我理解正確，我認為您正在尋找類似的東西。 您需要在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;
}
});
}
}
解決方案3
1 2016-05-03 17:33:04
檢查是否對您有用...
第二選擇值將基於第一個選擇的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>
解決方案4
0 2016-05-03 16:34:16
這是使用三個選擇下拉菜單的方法： 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>
角度選擇ng選擇不起作用 <option ng-repeat> ）
[英]angular select ng-selected not working (with <option ng-repeat>)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
基於選擇選項的 AngularJS ng-repeat 過濾器
ng-repeat Angularjs中的repeat Select選項
選中選項ng-repeat
顯示一個由ng-repeat選擇的選項（AngularJS）
AngularJS ng-repeat 不適用於選擇選項
角度選擇ng選擇不起作用 <option ng-repeat> ）
ng-class根據ng-repeat中的條件選擇按鈕
AngularJS：刪除角度ng-repeat中的空選擇選項
使用ng-repeat angular動態創建級聯選擇選項
預選 <option>在<select>在使用ng-repeat時
相關標簽