Angular ng-options in select2 - settings value property

Question

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?

Do you want the value to be the index or the country code? It's unclear from the question which is the defect and which is the desired one. — alun, Jun 25 '13 at 10:59

score 3 · Accepted Answer · answered Jun 23 '13 at 23:06

3

Here is a plunker.

I don't see any issue, although I did change the format of selectedCountries to be an array of country codes (["IL", ...]) instead of the data structure you provided ([{country:"IL", ...}]).

Angular does generate the options using the index as the value, but the ngModel will contain the propper value. If you are doing form submission with the select, you should be using the data out of the ngModel instead of the data from the select in the HTML. If you need to put the data from the select on the page in a form, you could put the values of the select's ngModel into hidden form elements.

answered Jun 23 '13 at 23:06

rtcherry

4,840
22
27

I followed your plunker and tried to simulate my environment. I was loading each angular-ui from a separate file. when I used your angular-ui.js everything worked! Thank you! where did you get version 0.4 from? – Roy Tsabari Jun 27 '13 at 13:30
That is the default AngularUI available from plunker. You can also access it on [cdnjs.com](http://cdnjs.com/), but I can't seem to find a link to it on the AngularUI github page since they are breaking the project into sub-projects. – rtcherry Jun 27 '13 at 16:05
Thanks for the plunker, you're version saved me quite a few lines of code i.e. the filter being applied to the second list – Stephen Patten Nov 21 '13 at 20:14

score 0 · Answer 2 · answered Jun 24 '13 at 19:53

If you're ok with having the chosen items being a mirror of what is in your countriesList like so:

$scope.data.selectedCountries = [$scope.data.countriesList[0]];

ng-options="country as country.name for country in data.countriesList">

Then here's an updated plunkr of how to accomplish what you need: http://plnkr.co/edit/qE3SJm?p=preview

If instead, you do just want the country code, when you're assigning it into the selectedCountries, you have to reference the actual location it is within the country array:

$scope.data.selectedCountries = [$scope.data.countriesList[0].code];

ng-options="country.code as country.name for country in data.countriesList">

Other plunkr: http://plnkr.co/edit/ysAatS?p=preview

score 0 · Answer 3 · answered Feb 10 '14 at 16:47

try this:

<select style="width: 100%" ui-select2="{multiple: true}" ng-model="countriesList" class="form-control select2"  multiple style="width:300px">
  <option></option>
  <option ng-repeat="country in countriesList" value="{{country}}">{{country}}</option>
</select>

assuming the structure is like @rtcherry mentioned.

Angular ng-options in select2 - settings value property

3 Answers3

Linked