大家好,我正在使用ArgularJs 1.5。我需要根据Dropdown 1的选择填充Dropdown 2,只在它存在的情况下显示它(如果选择的Dropdown 1有Dropdown 2),否则不显示Dropdown 2(停用它),并在我的表中显示所选的Dropdown的值(Dropdown 1或Dropdown 2的值)。
在这种情况下,我有一个名为city
的下拉列表1,它有3个subcity
(下拉列表2)。我想在选择city
时显示它们,并在选择一个子城市(如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,也不能迭代它的值。任何人都可以帮我。
所以这里的第一个问题是数据结构-它不允许你模拟预期的行为,所以我对它做了一点更改:
$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更改事件,HTML现在是:
<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;
}
}
完整的工作演示在这里