Binding select with ng-options using an array of labels and values

Question

I for the life of me cannot figure out how to set both the labal and the value of a select using an array

I have an array of countries

$scope.countries =  [
    {abbr:"US", name:"United States"},
    {abbr:"CA", name:"Canada"},......
]

I want the select to generate as such

<select>
  <option value="US">United States</option>
  <option value="CA">Canada</option>
</select>

However the closest I have been able to achieve is

<select>
  <option value="1">United States</option>
  <option value="2">Canada</option>
</select>

I've achieved that using

<select class="form-control" ng-options="country.Name for country in countries" ng-model="selectedCountry">

How do I assign the label AND the value using ng-options?

docs.angularjs.org/api/ng/directive/ngOptions. The angular docs tell you how to do this. — ribsies
– ribsies, Commented Feb 27, 2015 at 20:46
This already has been answered by stackoverflow.com/questions/12139152/… — gerl
– gerl, Commented Feb 27, 2015 at 21:02

Dylan · Accepted Answer · 2015-02-27 20:47:03Z

1

Without testing I think it's just

ng-options="country.abbr as country.name for country in countries"

answered Feb 27, 2015 at 20:47

Dylan

4,7831 gold badge22 silver badges27 bronze badges

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

3 Comments

mrb398 Over a year ago

This is what I thought, but it produces a numbered value instead of my abbreviation value

Dylan Over a year ago

Wow that's a little harsh - jsfiddle.net/devitate/uaxv70kc - it does work.

mrb398 Over a year ago

I'm sorry, you were correct. Apparently I was correct all along too. I was looking at the generated HTML and not at what was actually being stored in the model. Thanks

Pankaj Parkar · Accepted Answer · 2015-02-27 21:33:55Z

0

For exact structure, you need to do ng-repeat through your <option><option> ng-options will never set the value which which you want, It will always set 0,1,2,3 etc.

HTML

<select ng-model="selectedCountry">
    <option ng-repeat="country in countries" value="{{country.abbr}}" ng-bind="country.name"></option>
</select>

JSFiddle

Hope this could help you, Thanks.

answered Feb 27, 2015 at 21:33

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

1 Comment

Pankaj Parkar Over a year ago

@user1691808 if it does helpful then atleast do voteup..Thanks.

Collectives™ on Stack Overflow

Binding select with ng-options using an array of labels and values

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related