AngularJS - get properties of selected option in dropdown

Question

Starting out on Angular and using select dropdowns are really confusing me. Basically I am getting JSON object using an AJAX call and then populating my form with JSON using AngularJS.

For the dropdown, the settings.metric = '2' from database. So the selected is "cm".

My question is, how do I get the currently selected option and its datavalue? I tried scope.settings.metric but all that gives me is "2". I like to get the other properties of the selected such as name and datavalue.

$scope.metrics = [
            {id:1,name:'in',value:'1',datavalue:'in'},
            {id:2,name:'cm',value:'2',datavalue:'cm'},
            {id:3,name:'px',value:'3',datavalue:'px'},
            {id:4,name:'pt',value:'4',datavalue:'pt'}
            ];

<select 
    ng-model="settings.metric" // this is 2 from database call
    ng-options="p.value as p.name for p in metrics" >
</select>

bad_coder · Accepted Answer · 2022-09-13 19:33:39Z

5

This is pretty simple with what you already have. You have to write this.

ng-options="p as p.name for p in metrics"

The first parameter 'p' is the value that will be stored. The second parameter 'p.name' is the value displayed in the option.

edited Sep 13, 2022 at 19:33

bad_coder

13.2k20 gold badges59 silver badges95 bronze badges

answered Jan 18, 2014 at 2:17

Zack Argyle

8,4674 gold badges32 silver badges38 bronze badges

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

7 Comments

Scott Yu - builds stuff Over a year ago

Hi, thanks for answer. But I was wondering how to access the currently selected option properties from outside in another javascript function... any ideas?

Aaron Saunders Over a year ago

check the value of the ng-model

Zack Argyle Over a year ago

@ScottYu-UXdesigner If you do it this way you have the whole object in scope.settings.metric

Scott Yu - builds stuff Over a year ago

@ZackArgyle Thats weird.. I tried doing scope.settings.metric but all I get is "2"... I finally had to do scope.metrics[parseFloat(scope.settings.metric-1)].datavalue;

Zack Argyle Over a year ago

@ScottYu-UXdesigner, Don't know how you are doing it, but here is a fiddle that seems to be working fine with your stuff. jsFiddle Example

|

Collectives™ on Stack Overflow

AngularJS - get properties of selected option in dropdown

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related