根据下拉列表1的选择以及选择子选项时如何进行迭代来填充下拉列表2 [英] Populate Dropdown 2 based on Dropdown 1 selection and how to iterate when I chose a suboption
问题描述
大家好，我正在使用ArgularJs 1.5.我需要根据下拉列表1的选择填充下拉列表2，仅在存在下拉列表2的情况下显示它(如果选择的下拉列表1具有dropDown 2)，否则不显示下拉列表2(停用它)并显示所选dropDown的值(两个下拉列表之一)1或dropDown 2)插入到我的表格中.
Hello everyone I am working with ArgularJs 1.5. I need to populate Dropdown 2 based on Dropdown 1 selection, to show it only if it exists (if DropDown 1 selected had dropDown 2) else don't show Dropdown 2 (deactivate it) and show the values of dropDown selected (either of dropDown 1 or of dropDown 2) into my table.
在这种情况下，我有一个名为 city 的下拉列表1，其中有3个 subcity (下拉列表2)，当我选择 city 时，我想向他们展示当我选择一个像 subcity02
In this case I have a dropDown 1 named city which has 3 subcity (dropdown 2) I would like to show them when I select city and iterate values (matrix) when I chose one subcity like subcity02
<div ng-app="app" ng-controller="MainController">
<select ng-model="selectedCity" ng-options="x as (x | cityFilter) for (x, y) in cities">
</select>
<select ng-model="selectedSubCity" ng-options="x as (x | cityFilter) for (x, y) in selectedCity.subCity">
</select>
</div>
<table>
<tr ng-repeat="item in selectedCity"><!--but here I need to iterat the selectedSubCity too when I select DropDown 2-->
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
</tr>
</table>
这是我的脚本js:
angular.module('app', [])
.filter('cityFilter', function() {
return function(city) {
return city.replace('_', ' ');
}
})
.controller('MainController', ['$scope', function($scope) {
$scope.cities = {
city : [
{id:'c01' , name:'name1', price:15},
{id:'c02' , name:'name2', price:18},
{id:'c03' , name:'name3', price:11},
{subCity01 : [
{id:'sub01' , name:'nameSub1', price:1},
{id:'sub02' , name:'nameSub2', price:8},
{id:'sub03' , name:'nameSub3', price:1},
],
subCity02 : [
{id:'ssub01' , name:'nameSsub1', price:1},
{id:'ssub02' , name:'nameSsub2', price:8},
{id:'ssub03' , name:'nameSsub3', price:4},
],
subCity03 : [
{id:'sssub01' , name:'nameSssub1', price:1},
{id:'sssub02' , name:'nameSssub2', price:2},
{id:'sssub03' , name:'nameSssub3', price:1},
]
},
],
city_02 : [
{id:'cc01' , name:'name11', price:10},
{id:'cc02' , name:'name22', price:14},
{id:'cc03' , name:'name33', price:11},
],
city_03 : [
{id:'ccc01' , name:'name111', price:19},
{id:'ccc02' , name:'name222', price:18},
{id:'ccc03' , name:'name333', price:10},
]
};
这不能解决我的问题，我看不到dropDown 2，也无法迭代其值.任何人都可以帮助我.
this don't fix my issue I can't see the dropDown 2 and I can't iterate its values. Anybody could help me please.
推荐答案
因此，这里的第一个问题是数据结构-它不允许您以这种方式模拟预期的行为，所以我做了一些改动:
So the first issue here is the data structure - it will not allow you simulate the expected behavior the way it is, so I changed it a little bit:
$scope.cities = [
{
name: "city A",
elements: [{
id: 'c01',
name: 'name1',
price: 15
}, {
id: 'c02',
name: 'name2',
price: 18
}, {
id: 'c03',
name: 'name3',
price: 11
}],
subsities: [ {
name: "sub A1",
elements: [{
id: 'sub01',
name: 'nameSub1',
price: 1
}, {
id: 'sub02',
name: 'nameSub2',
price: 8
}, {
id: 'sub03',
name: 'nameSub3',
price: 1
} ]
},
{
name: "sub A2",
elements: [{
id: 'ssub01',
name: 'nameSsub1',
price: 1
}, {
id: 'ssub02',
name: 'nameSsub2',
price: 8
}, {
id: 'ssub03',
name: 'nameSsub3',
price: 4
} ]
},
{
name: "sub A3",
elements: [{
id: 'sssub01',
name: 'nameSssub1',
price: 1
}, {
id: 'sssub02',
name: 'nameSssub2',
price: 2
}, {
id: 'sssub03',
name: 'nameSssub3',
price: 1
}]
}
]
},
{
name: "city B",
elements: [{
id: 'cc01',
name: 'name11',
price: 10
}, {
id: 'cc02',
name: 'name22',
price: 14
}, {
id: 'cc03',
name: 'name33',
price: 11
} ]
},
{
name: "city C",
elements: [{
id: 'ccc01',
name: 'name111',
price: 19
}, {
id: 'ccc02',
name: 'name222',
price: 18
}, {
id: 'ccc03',
name: 'name333',
price: 10
} ]
}
];
第二个更改:我在两个下拉列表中都添加了ng-change事件，现在的HTML是:
Second change: I added ng-change event on both dropdowns and the HTML is now :
<body ng-controller="MainCtrl">
<select ng-model="selectedCity" ng-change="extractSubsities(selectedCity)" ng-options="item as item.name for item in cities track by item.name">
</select>
<select ng-show="selectedCity.subsities" ng-model="selectedSubCity" ng-change="extractSubsities(selectedSubCity)" ng-options="item2 as item2.name for item2 in selectedCity.subsities track by item2.name">
</select>
<table>
<tr ng-repeat="item3 in data track by item3.id">
<!--but here I need to iterat the selectedSubCity too when I select DropDown 2-->
<td>{{ item3.id }}</td>
<td>{{ item3.name }}</td>
<td>{{ item3.price }}</td>
</tr>
</table>
</body>
第三个-更改事件:
$scope.extractSubsities = function(itemSelected) {
if(itemSelected && itemSelected.elements){
$scope.data = itemSelected.elements;
}
}
完整的工作演示位于此处
这篇关于根据下拉列表1的选择以及选择子选项时如何进行迭代来填充下拉列表2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
