In my web app, I am utilizing AngularJS to create two dropdown lists using ng-options.
- The first dropdown displays a list of countries
- The second dropdown provides language preferences for the selected country
As I am still new to AngularJS, I am able to display the data but it is being shown as a single option instead of separate options.
Below is the code snippet that I have 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: When selecting Belgium, there should be individual dropdown options for Dutch, English, and French. For France, there should be separate dropdown options for English and French.
Please review the code and let me know if I have missed anything. Your assistance is greatly valued.