Bind one attribute of an array of ng-options

Question

I have the following array:

[{code: "AF", name: "Afghanistan"}, {code: "ZA", name: "South Africa"}, {code: "AL", name: "Albania"}]

I have a select and would like to bind my ng-model only on the code attribute of the selected object and not the whole object. But on the other hand, I would like my select to display only the name (and not the code). In addition, I would like that if I set my ng-model to a code, it will pre-select the name in the selection.

I tried the following (Jade)

select(ng-model='myCountry', ng-options='country.name for country in countries track by country.name')

Here my ng-model gets the whole object (myCountry = {code: "AF", name: "Afghanistan"}) and not just the code (myCountry = "AF")

Is it possible to do that?

possible duplicate of How to set value property in angularjs ng-options? — Julien
– Julien, Commented Jun 23, 2014 at 9:14

Martin-Brennan · Accepted Answer · 2015-08-13 05:31:53Z

7

You can use:

  <div>
    <select ng-model="country" ng-options="country.code as country.name for country in countries"></select>
    Selected country (ng-model): {{country}}
  </div>

country.code - will be used as the ng-model attribute.

country.name - will be used to display the item in select.

See the demo here.

And if you want to set the select option to a pre-selected value just use the country model to supply the value.

edited Aug 13, 2015 at 5:31

Martin-Brennan

9258 silver badges19 bronze badges

answered Jun 23, 2014 at 9:05

guru

4,0221 gold badge31 silver badges33 bronze badges

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

2 Comments

Nate Over a year ago

Thanks...but I forgot to say that the selection needs to be sorted by array index. Can you add that easily?

Mathemats Over a year ago

Those second and third sentences are brilliant champ.

Collectives™ on Stack Overflow

Bind one attribute of an array of ng-options

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related