I have an array of countries:
var countriesList: [
{name: "Israel", code: "IL"},
{name: "India", code: "IN"},
{name: "Andorra", code: "AD"}
]
and an array of selected countries:
selectedCountries: [
{
country:"IL"
}
]
I'm using select2 for selecting countries.
I started with ng-repeat for generating the <options/>
tag:
<select
id="countriesList"
ui-select2
multiple
ng-model='data.selectedCountries'
data-placeholder='Choose or Search for Countries'
name='locations'
ng-change='geoTargetingChanged()'>
<option ng-repeat="country in data.countriesList" value="{{country.code}}">{{country.name}}</option>
</select>
this method worked well, but it caused the form to be $dirty
right at start.
so I started using the `ng-options- mechanism (after reading this answer):
<select
id="countriesList"
ui-select2
multiple
ng-model='data.selectedCountries'
data-placeholder='Choose or Search for Countries'
name='locations'
ng-change='geoTargetingChanged()'
ng-options="country.code as country.name for country in data.campaignSettings.countriesList">
<option></option>
</select>
Now the problem is that the value of the items is not the country code, it is their index in the array.
Am i missing something?