angularjs ng-options nested json data

Question

I am using AngularJS for my web app. My objective is to have two dropdowns list using ng-options.

The first dropdown showing the country list
The other gives the language preferences for the selected country

Being still new to AngularJS, I am able to display the data but the entire object is displayed as a single option, I am unable to split each data.

Kindly find the code below that I used.

HTML

<select ng-model="selectedRegion" ng-options="region.countryName for region in eyebrow.regionSelector"></select>
<select ng-model="selectedRegion.selectLang" ng-options= "selectedRegion.selectLang for region in selectedRegion track by selectedRegion.countryName"></select>

JS:

angular.module ('appngOption')
.controller ('headerController', function($scope) {
  $scope.eyebrow = { regionSelector: [
  {
     "id": 1,
     "countryName": "Belgium",
     "selectLang": ["Dutch", "English", "French"]
  },{
     "id": 2,
     "countryName": "France",
     "selectLang": ["English", "French"]
  }]}
});

Example: Dutch, English and French should be each separate dropdown option when Belgium is selected. & English and French should be each separate dropdown option when France is selected.

Kindly review the code and let me know if i had missed anything. Your help is deeply appreciated.

Mistalis · Accepted Answer · 2017-05-22 15:06:48Z

2

I fixed some issues in your code.

JSFiddle demo

The first input was correct:

<select ng-model="selectedRegion" ng-options="region.countryName for region in eyebrow.regionSelector"></select>

But in the second, I changed several things:

Set ng-model to a different variable (selectLang), it's cleaner.
ng-options loops over selectedRegion.regionSelector, instead of just selectedRegion. That was your main mistake here:

<select ng-model="selectLang" ng-options="lang for lang in selectedRegion.selectLang"></select>

edited May 22, 2017 at 15:06

answered Jan 30, 2017 at 12:16

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Raghavan Ravi Over a year ago

That helped a lot. Will I be able to set a default value when a country is selected, for example when I select Belgium, can I have the language set to French.

Collectives™ on Stack Overflow

angularjs ng-options nested json data

HTML

JS:

1 Answer 1

JSFiddle demo

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

HTML

JS:

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related