CODEWITHSUNDEEP
javascriptangularjs
Royi Namir
Royi Namir

Reputation: 148524

AngularJs's ng-options - clarification?

I have this small demo.

Basically , it's a select element with this data : 

 address: {
            select: {
                code: "0",
                name: "Select proof of address"
            },
            letter: {
                code: "1",
                name: "Letter"
            },
            photograph: {
                code: "2",
                name: "Photograph"
            }
        }

And here is the select

 <select ng-model="current.addressCode" ng-options="value.code as value.name for (key,value) in student.address"</select>

Questions:

Question #1 - Looking at the Ng doc -

enter image description here

And so , I try to compare

value.code as value.name for (key,value) in student.address

to the second line ( which i find most appropriate)

select as label for (key , value) in object

What is going on here ?

value.code goes to select ???

Html select element has an option tag with value and inside text like :

<option value="volvo">Volvo</option> thats' all.

What did they mean in their docs ?

Question #2

How can I bind this object of myne to a regular sane value,text select ?

(I want the code to be the value and the name to be as text)

Currently I dont see any value in the dom :

enter image description here

Upvotes: 1

Views: 75

Answers (2)

Eugene P.
Eugene P.

Reputation: 2625

http://jsfiddle.net/7FL76/1/

how about this:

it requires simple change : 

 address: [
            {
                code: "0",
                name: "Select proof of address"
            },
            {
                code: "1",
                name: "Letter"
            },
            {
                code: "2",
                name: "Photograph"
            }
        ]

the reason is your Key is same as nested Name ( like, letter - Letter ) , so json is a bit redundant.

as result you will see.

value as a code, and text as a name .

Upvotes: 0

callmekatootie
callmekatootie

Reputation: 11228

You are correct in understanding that example two fits your needs, that is: 

select as label for (key , value) in object

Here, as the documentation mentions: 

select: The result of this expression will be bound to the model of the 
        parent <select> element. If not specified, select expression will
        default to value.

So, for your use case, your existing code for the select tag is correctly structured:

<select ng-model="current.addressCode" ng-options="value.code as value.name for
        (key,value) in student.address"></select>

value.code value is stored in current.addressCode while, in the select dropdown, you should see value.name as the options label.

EDIT: So, to answer your questions:
Question 1
In this case, "select" is just a variable name - a placeholder if you may like for the documentation to explain about it (which it does further below). In your code, the value of the variable that is used instead of select is the one that gets bound to the select's ng-model (In your case, value.code)

Question 2
Exactly as you have mentioned: 

<select ng-model="current.addressCode" ng-options="value.code as value.name for
            (key,value) in student.address"></select>

This will give you the necessary value, text select tag automatically. When you select an option, the value.code associated with that option gets stored in current.addressCode

Upvotes: 1

Related Questions