ng-options with simple array init

Question

I'm a little bit confused with Angular and ng-options.

I have a simple array and I want to init a select with it. But, I want that options value = label.

script.js

$scope.options = ['var1', 'var2', 'var3'];

html

<select ng-model="myselect" ng-options="o for o in options"></select>

What I get:

<option value="0">var1</option>
<option value="1">var2</option>
<option value="2">var3</option>

What I want:

<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>

So I tried:

<select ng-model="myselect2" ng-init=0 ng-options="options[k] as v for (k,v) in options"></select>

<select ng-model="myselect3" ng-init=0 ng-options="b as b for b in options"></select>

(But it didn’t work.)

Edit:

My form is submitted externally, which is why I need 'var1' as the value instead of 0.

James Davies · Accepted Answer · 2013-08-13 06:34:45Z

314

You actually had it correct in your third attempt.

 <select ng-model="myselect" ng-options="o as o for o in options"></select>

See a working example here: http://plnkr.co/edit/xEERH2zDQ5mPXt9qCl6k?p=preview

The trick is that AngularJS writes the keys as numbers from 0 to n anyway, and translates back when updating the model.

As a result, the HTML will look incorrect but the model will still be set properly when choosing a value. (i.e. AngularJS will translate '0' back to 'var1')

The solution by Epokk also works, however if you're loading data asynchronously you might find it doesn't always update correctly. Using ngOptions will correctly refresh when the scope changes.

answered Aug 13, 2013 at 6:34

James Davies

9,9296 gold badges40 silver badges45 bronze badges

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

13 Comments

EpokK Over a year ago

You're off topic. You didn't understand the instructions. He want value in his select.

James Davies Over a year ago

I understood the instructions, however it's quite likely his intent is to bind the 'value' to the model, and is misunderstanding what's happening due to the way AngularJs is rendering the tag.

Dragu Over a year ago

It works if you get select's value with angular, but in my case (ie classic submit form), values will be 0,1,2,3, not var1,var2,var3

James Davies Over a year ago

I assumed you were binding to the model, but if you're simply using AngularJS to render a form submitted externally to angular, then use EpokK's solution.

fool4jesus Over a year ago

Is it just me, or is this the most jacked-up and unclear syntax ever?

|

EpokK · Accepted Answer · 2013-08-13 09:30:14Z

35

You can use ng-repeat with option like this:

<form>
    <select ng-model="yourSelect" 
        ng-options="option as option for option in ['var1', 'var2', 'var3']"
        ng-init="yourSelect='var1'"></select>
    <input type="hidden" name="yourSelect" value="{{yourSelect}}" />
</form>

When you submit your form you can get value of input hidden.

DEMO

ng-selected ng-repeat

edited Aug 13, 2013 at 9:30

answered Aug 13, 2013 at 6:29

EpokK

38.1k9 gold badges63 silver badges69 bronze badges

1 Comment

EpokK Over a year ago

If you have dicreased my answer, check my new solution.

Ida N · Accepted Answer · 2015-07-14 19:07:21Z

24

If you setup your select like the following:

<select ng-model="myselect" ng-options="b for b in options track by b"></select>

you will get:

<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>

working fiddle: http://jsfiddle.net/x8kCZ/15/

answered Jul 14, 2015 at 19:07

Ida N

1,96122 silver badges21 bronze badges

3 Comments

Ena Over a year ago

This solution was the only one that worked for me for selecting the initial value in an array of strings.

Gurnard Over a year ago

yeah this should be the answer, the track by does the magic for me.

sac Dahal Over a year ago

i was least expecting after following above solutions but this was the easy way out

Brad Larson · Accepted Answer · 2015-02-25 16:27:04Z

22

you could use something like

<select ng-model="myselect">
    <option ng-repeat="o in options" ng-selected="{{o==myselect}}" value="{{o}}">
        {{o}}
    </option>
</select>

using ng-selected you preselect the option in case myselect was prefilled.

I prefer this method over ng-options anyway, as ng-options only works with arrays. ng-repeat also works with json-like objects.

edited Feb 25, 2015 at 16:27

Brad Larson

170k45 gold badges401 silver badges574 bronze badges

answered Mar 18, 2014 at 16:12

iPirat

2,2061 gold badge20 silver badges32 bronze badges

3 Comments

Charlie Schliesser Over a year ago

ng-options works with object data sources, too. See docs.angularjs.org/api/ng/directive/select

Fadi Chamieh Over a year ago

Although others gave workarounds, this soltion is by far the most elegant and close to old html style, works with both angular model binding and form submital. Thanks!

Kasey Speakman Over a year ago

ng-selected does not need the handlebars since it is an angular directive. Excellent solution.

Toolkit · Accepted Answer · 2014-12-23 00:19:27Z

10

<select ng-model="option" ng-options="o for o in options">

$scope.option will be equal to 'var1' after change, even you see value="0" in generated html

plunker

edited Dec 23, 2014 at 0:19

answered Aug 13, 2014 at 9:12

Toolkit

11.1k8 gold badges63 silver badges70 bronze badges

Collectives™ on Stack Overflow

ng-options with simple array init

script.js

html

Edit:

5 Answers 5

13 Comments

1 Comment

3 Comments

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

script.js

html

Edit:

5 Answers 5

13 Comments

1 Comment

3 Comments

3 Comments

Comments

Linked

Related