AngularJS-在选择的optgroups中按对象显示嵌套的JSON

Question

I'm trying to create a select with optgroups for countries in the UK, each including a list of their counties that can be selected.

I'm trying to do this using ng-repeat with Angular to access the data, which I can do for single-level arrays in a select, but I'm not sure I've set up my counties array correctly to do this, and the counties are obviously not showing in the list.

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>

-

Array:

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'
            },
        ]
    }
];

Answer 1

Your data is structured as an array. Try turning counties into an Object instead, since you're trying to access properties in your template code. Like so:

var counties =
    {
        england: [
            {
                name: 'Bath and North East Somerset'
            },
            ...
    }

instead of

var counties = [
    {
        england: [
            {
                name: 'Bath and North East Somerset'
            },
            ...
    }
]

If you can't change the data model, try accessing them in your template like so as a workaround:

data-ng-repeat="county in counties[0].scotland"

Answer 2

you made a tiny mistake when addressing/setting up your counties list. You are referring to counties.england but in your data structure it is rather counties[0].england. Please see this working codepen: https://codepen.io/andrasadam93/pen/XegMJQ

The important part is the removed array from the beginning:

$scope.counties = {
        england: [
            {
                name: 'Bath and North East Somerset'
            },
...

In case it needs further clarification please let me know and will add some further detail!

Answer 3

Your county object is in a wrong format. It needs to be an object and it should contain all the counties as objects . Just look at the following example. I corrected your object to work properly.

 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>