How do I pass an array to ng-options in angular?

Question

My array is something like this:

$scope.states = [{                  
    "AB" : "Abia",
    "AJ" : "Abuja",                
    "AN" : "Anambra"}];

Here is the HTML:

<select ng-options="state for state in states">
    <option value=""></option>
</select>

How do I properly pass it over?

Your Plunkr demo is very complicated and not representative of the question — Vlad274
– Vlad274, Commented May 10, 2015 at 1:51
@Vlad274 , just looking at the snippet of code is what i need to know m the plunker is pretty irrelevant — Anthony Akpan
– Anthony Akpan, Commented May 10, 2015 at 1:54
@AnthonyAkpan, what is state.[0]? this is not a valid syntax. Also, ng-options requires ng-model — New Dev
– New Dev, Commented May 10, 2015 at 1:56
@AnthonyAkpan, also your states array has only a single element. Is this intentional? And if you intend to use an object, then the syntax is ng-options="key as value for (key, value) in states" (or something like that) — New Dev
– New Dev, Commented May 10, 2015 at 1:59

New Dev · Accepted Answer · 2015-05-10 02:05:59Z

3

Your states is an array with a single element - an object with states as key/value pairs. You can still use an object with ng-options - not sure though why an array is needed - so long as you refer to the source object with "... in states[0]".

ng-options also requires an ng-model.

<select ng-model="selectedState"
        ng-options="key as state for (key, state) in states[0]">
</select>

The above would set selectedState to key (i.e. the abbreviation). You can set it to state as well).

Of course, if you don't need states to be an array of a single element and just set it to the element itself, then you could refer to it as "...(key, state) in states" rather than ... in states[0]".

answered May 10, 2015 at 2:05

New Dev

49.8k12 gold badges99 silver badges140 bronze badges

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

Comments

coderLMN · Accepted Answer · 2015-05-10 02:08:28Z

1

JS:

$scope.states = {
        "AB" : "Abia",
        "AJ" : "Abuja",
        "AN" : "Anambra"};

HTML:

<select ng-options="k as v for (k,v) in states"></select>

answered May 10, 2015 at 2:08

coderLMN

3,0861 gold badge23 silver badges26 bronze badges

Collectives™ on Stack Overflow

How do I pass an array to ng-options in angular?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related