I load the ng-options with object, but I would like the matching ng-model as a single value

Question

I use an array structered like this:

[
{"name": "Afghanistan", "code": "AF"},
{"name": "Åland Islands", "code": "AX"},
{"name": "Albania", "code": "AL"},
{"name": "Algeria", "code": "DZ"},...

To load a select with ng-options:

  <select class="form-control" id="country" ng-model="val" ng-options="country.name for country in countryList">
                    </select>

Indeed the select display the list of the countries by name. I want the list to select an option by the country code and not by the object {name ... code..} as it works now. How could I do that? Thanks

Answer 1

check the DOC for for ng-options,

it says,

for array data sources:

label for value in array

select as label for value in array

label group by group for value in array

label disable when disable for value in array

label group by group for value in array track by trackexpr

label disable when disable for value in array track by trackexpr

label for value in array | orderBy:orderexpr track by trackexpr (for including a filter with track by)

so you need to modify your code as below,

 <select class="form-control" id="country" ng-model="val" ng-options="country.code as country.name for country in countryList">

here ng-options="country.code as country.name for country in countryList"

countryList - is the data source.

country - is the single item in the countryList.

country.name - is the name property of the country this is the label in option.

country.code - is the selected value in the select box.

here is the Demo Plunker