我正在尝试为英国国家/地区的选择组创建一个选择，每个选项包括可以选择的县的列表。
我正在尝试使用具有Angular的NG-Repeat来访问数据，我可以为Select中的单层数组做到这一点，但是我不确定我已经正确设置了我的县阵列这样做，而且县显然没有在列表中显示。
jsfiddle：https：//jsfiddle.net/ehtxcwtk/1/。
html：
<select data-ng-model="address.county" id="countySelect" material-select watch name="countySelect" class="validate">
<option value="" selected>Select an option</option>
<optgroup label="England">
<option data-ng-repeat="county in counties.england">{{county.name}}</option>
</optgroup>
<optgroup label="Scotland">
<option data-ng-repeat="county in counties.scotland">{{county.name}}</option>
</optgroup>
<optgroup label="Wales">
<option data-ng-repeat="county in counties.wales">{{county.name}}</option>
</optgroup>
<optgroup label="Northern Ireland">
<option data-ng-repeat="county in counties.northernIreland">{{county.name}}</option>
</optgroup>
</select>
-
数组：
var counties = [
{
england: [
{
name: 'Bath and North East Somerset'
},
{
name: 'Bedfordshire'
},
{
name: 'Berkshire'
},
{
name: 'Bristol'
},
{
name: 'Buckinghamshire'
},
{
name: 'Cambridgeshire'
},
{
name: 'Cheshire'
},
{
name: 'Cornwall'
},
{
name: 'County Durham'
},
{
name: 'Cumbria'
},
{
name: 'Derbyshire'
},
{
name: 'Devon'
},
{
name: 'Dorset'
},
{
name: 'East Riding of Yorkshire'
},
{
name: 'East Sussex'
},
{
name: 'Gloucestershire'
},
{
name: 'Greater London'
},
{
name: 'Greater Manchester'
},
{
name: 'Hampshire'
},
{
name: 'Herefordshire'
},
{
name: 'Hertfordshire'
},
{
name: 'Isle of Wight'
},
{
name: 'Isles of Scilly'
},
{
name: 'Kent'
},
{
name: 'Lancashire'
},
{
name: 'Leicestershire'
},
{
name: 'Lincolnshire'
},
{
name: 'Merseyside'
},
{
name: 'Norfolk'
},
{
name: 'North Somerset'
},
{
name: 'North Yorkshire'
},
{
name: 'Northamptonshire'
},
{
name: 'Northumberland'
},
{
name: 'Nottinghamshire'
},
{
name: 'Oxfordshire'
},
{
name: 'Rutland'
},
{
name: 'Shropshire'
},
{
name: 'Somerset'
},
{
name: 'South Gloucestershire'
},
{
name: 'South Yorkshire'
},
{
name: 'Staffordshire'
},
{
name: 'Suffolk'
},
{
name: 'Surrey'
},
{
name: 'Tyne and Wear'
},
{
name: 'Warwickshire'
},
{
name: 'West Midlands'
},
{
name: 'West Sussex'
},
{
name: 'West Yorkshire'
},
{
name: 'Wiltshire'
},
{
name: 'Worcestershire'
}
]
},
{
scotland: [
{
name: 'Aberdeenshire'
},
{
name: 'Angus'
},
{
name: 'Argyll and Bute'
},
{
name: 'Ayrshire'
},
{
name: 'Banffshire'
},
{
name: 'Berwickshire'
},
{
name: 'Borders'
},
{
name: 'Caithness'
},
{
name: 'Clackmannanshire'
},
{
name: 'Dumfries and Galloway'
},
{
name: 'Dunbartonshire'
},
{
name: 'East Ayrshire'
},
{
name: 'East Dunbartonshire'
},
{
name: 'East Lothian'
},
{
name: 'East Renfrewshire'
},
{
name: 'Fife'
},
{
name: 'Highland'
},
{
name: 'Inverclyde'
},
{
name: 'Kincardineshire'
},
{
name: 'Lanarkshire'
},
{
name: 'Midlothian'
},
{
name: 'Moray'
},
{
name: 'North Ayrshire'
},
{
name: 'North Lanarkshire'
},
{
name: 'Orkney'
},
{
name: 'Perth and Kinross'
},
{
name: 'Renfrewshire'
},
{
name: 'Shetland'
},
{
name: 'South Ayrshire'
},
{
name: 'South Lanarkshire'
},
{
name: 'Stirlingshire'
},
{
name: 'West Dunbartonshire'
},
{
name: 'West Lothian'
},
{
name: 'Western Isles'
}
]
},
{
wales: [
{
name: 'Blaenau Gwent'
},
{
name: 'Bridgend'
},
{
name: 'Caerphilly'
},
{
name: 'Cardiff'
},
{
name: 'Carmarthenshire'
},
{
name: 'Ceredigion'
},
{
name: 'Conwy'
},
{
name: 'Denbighshire'
},
{
name: 'Isle of Anglesey'
},
{
name: 'Merthyr Tydfil'
},
{
name: 'Monmouthshire'
},
{
name: 'Neath Port Talbot'
},
{
name: 'Newport'
},
{
name: 'Pembrokeshire'
},
{
name: 'Powys'
},
{
name: 'Rhundda Cynon Taff'
},
{
name: 'Swansea'
},
{
name: 'Torfaen'
},
{
name: 'Vale of Glamorgan'
},
{
name: 'Wrexham'
}
],
},
{
scotland: [
{
name: 'Antrim'
},
{
name: 'Armagh'
},
{
name: 'Down'
},
{
name: 'Fermanagh'
},
{
name: 'Londonderry'
},
{
name: 'Tyrone'
},
]
}
];
您的county object的格式错误。它需要是object，并且应包含所有县为objects。只需查看以下示例即可。我纠正了您的对象以正常工作。
var app = angular.module("app", []);
app.controller("MainController", function($scope) {
//Correct county object format
//////////////////////////////
$scope.counties = {
england: [{
name: 'Bath and North East Somerset'
},
{
name: 'Bedfordshire'
},
{
name: 'Berkshire'
},
{
name: 'Bristol'
},
{
name: 'Buckinghamshire'
},
{
name: 'Cambridgeshire'
},
{
name: 'Cheshire'
},
{
name: 'Cornwall'
},
{
name: 'County Durham'
},
{
name: 'Cumbria'
},
{
name: 'Derbyshire'
},
{
name: 'Devon'
},
{
name: 'Dorset'
},
{
name: 'East Riding of Yorkshire'
},
{
name: 'East Sussex'
},
{
name: 'Gloucestershire'
},
{
name: 'Greater London'
},
{
name: 'Greater Manchester'
},
{
name: 'Hampshire'
},
{
name: 'Herefordshire'
},
{
name: 'Hertfordshire'
},
{
name: 'Isle of Wight'
},
{
name: 'Isles of Scilly'
},
{
name: 'Kent'
},
{
name: 'Lancashire'
},
{
name: 'Leicestershire'
},
{
name: 'Lincolnshire'
},
{
name: 'Merseyside'
},
{
name: 'Norfolk'
},
{
name: 'North Somerset'
},
{
name: 'North Yorkshire'
},
{
name: 'Northamptonshire'
},
{
name: 'Northumberland'
},
{
name: 'Nottinghamshire'
},
{
name: 'Oxfordshire'
},
{
name: 'Rutland'
},
{
name: 'Shropshire'
},
{
name: 'Somerset'
},
{
name: 'South Gloucestershire'
},
{
name: 'South Yorkshire'
},
{
name: 'Staffordshire'
},
{
name: 'Suffolk'
},
{
name: 'Surrey'
},
{
name: 'Tyne and Wear'
},
{
name: 'Warwickshire'
},
{
name: 'West Midlands'
},
{
name: 'West Sussex'
},
{
name: 'West Yorkshire'
},
{
name: 'Wiltshire'
},
{
name: 'Worcestershire'
}
],
scotland: [{
name: 'Aberdeenshire'
},
{
name: 'Angus'
},
{
name: 'Argyll and Bute'
},
{
name: 'Ayrshire'
},
{
name: 'Banffshire'
},
{
name: 'Berwickshire'
},
{
name: 'Borders'
},
{
name: 'Caithness'
},
{
name: 'Clackmannanshire'
},
{
name: 'Dumfries and Galloway'
},
{
name: 'Dunbartonshire'
},
{
name: 'East Ayrshire'
},
{
name: 'East Dunbartonshire'
},
{
name: 'East Lothian'
},
{
name: 'East Renfrewshire'
},
{
name: 'Fife'
},
{
name: 'Highland'
},
{
name: 'Inverclyde'
},
{
name: 'Kincardineshire'
},
{
name: 'Lanarkshire'
},
{
name: 'Midlothian'
},
{
name: 'Moray'
},
{
name: 'North Ayrshire'
},
{
name: 'North Lanarkshire'
},
{
name: 'Orkney'
},
{
name: 'Perth and Kinross'
},
{
name: 'Renfrewshire'
},
{
name: 'Shetland'
},
{
name: 'South Ayrshire'
},
{
name: 'South Lanarkshire'
},
{
name: 'Stirlingshire'
},
{
name: 'West Dunbartonshire'
},
{
name: 'West Lothian'
},
{
name: 'Western Isles'
}
],
wales: [{
name: 'Blaenau Gwent'
},
{
name: 'Bridgend'
},
{
name: 'Caerphilly'
},
{
name: 'Cardiff'
},
{
name: 'Carmarthenshire'
},
{
name: 'Ceredigion'
},
{
name: 'Conwy'
},
{
name: 'Denbighshire'
},
{
name: 'Isle of Anglesey'
},
{
name: 'Merthyr Tydfil'
},
{
name: 'Monmouthshire'
},
{
name: 'Neath Port Talbot'
},
{
name: 'Newport'
},
{
name: 'Pembrokeshire'
},
{
name: 'Powys'
},
{
name: 'Rhundda Cynon Taff'
},
{
name: 'Swansea'
},
{
name: 'Torfaen'
},
{
name: 'Vale of Glamorgan'
},
{
name: 'Wrexham'
}
],
scotland: [{
name: 'Antrim'
},
{
name: 'Armagh'
},
{
name: 'Down'
},
{
name: 'Fermanagh'
},
{
name: 'Londonderry'
},
{
name: 'Tyrone'
},
]
};
//Default county
$scope.address = {
county: "Bristol"
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MainController">
<select ng-model="address.county" id="countySelect" material-select watch name="countySelect" class="validate">
<option value="" selected>Select an option</option>
<optgroup label="England">
<option data-ng-repeat="county in counties.england">{{county.name}}</option>
</optgroup>
<optgroup label="Scotland">
<option data-ng-repeat="county in counties.scotland">{{county.name}}</option>
</optgroup>
<optgroup label="Wales">
<option data-ng-repeat="county in counties.wales">{{county.name}}</option>
</optgroup>
<optgroup label="Northern Ireland">
<option data-ng-repeat="county in counties.northernIreland">{{county.name}}</option>
</optgroup>
</select>
</div>您的数据构成为数组。尝试将counties变成对象，因为您正在尝试访问模板代码中的属性。喜欢：
var counties =
{
england: [
{
name: 'Bath and North East Somerset'
},
...
}
而不是
var counties = [
{
england: [
{
name: 'Bath and North East Somerset'
},
...
}
]
如果您无法更改数据模型，请尝试在模板中像解决方法一样访问它们：
data-ng-repeat="county in counties[0].scotland"
在解决/设置县列表时，您犯了一个很小的错误。您指的是县。请参阅此工作codepen：https：//codepen.io/andrasadam93/pen/xegmjq
重要的部分是从一开始删除的数组：
$scope.counties = {
england: [
{
name: 'Bath and North East Somerset'
},
...
，如果需要进一步澄清，请告诉我并添加一些细节！