Binding both value and text in select dropdown in angular.js

Question

I have this dropdown in my page

<select 
    ng-options="col.col_id as col.col_name for col in meta_data.x_cols"
    ng-model="obj.x">
</select>

Since the model is set to obj.x, I can access it using $scope.obj.x in any $scope function.

Naturally, it gives the value of the selected option. Is there any way by which I can get selected text as well? for e.g. bind obj.x to and obj.x_text to the text of selected option.

just drop the 'as' ng-options="col.col_name for col in meta_data.x_cols". then your model will be the whole object. Here is an example - jsfiddle.net/devitate/LKeQz — Dylan
– Dylan, Commented Aug 11, 2014 at 5:59

apairet · Accepted Answer · 2014-08-13 19:41:04Z

9

If you bind col and not col.col_id:

<select 
    ng-options="col as col.col_name for col in meta_data.x_cols track by col.col_id"
    ng-model="obj.x">
</select>

you will be able to access both col_id and col_name from $scope.obj.x:

$scope.obj.x.col_id
$scope.obj.x.col_name

edited Aug 13, 2014 at 19:41

answered Aug 11, 2014 at 5:52

apairet

3,16224 silver badges24 bronze badges

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

5 Comments

Salman Over a year ago

Hey, it solved that problem but created new problem. When I change the model, it doesn't update the view. I think because now its an object, equality would fail, since ({} != {}).

apairet Over a year ago

Can you share a plunkr illustrating the behaviour?

Salman Over a year ago

Here's a fiddle jsfiddle.net/x8rq2pda/3. See how second select is not getting assigned value.

apairet Over a year ago

using angular 1.2 and above, you can use the track by, see jsfiddle.net/qomn86k3

Salman Over a year ago

Thanks man, you're awesome. I wish I could re-accept the answer. :)

Manish Kr. Shukla · Accepted Answer · 2014-08-11 05:53:39Z

0

Why not use ng-repeat on options tag..

for e.g

<select 
    ng-options="col.col_id as col.col_name for col in meta_data.x_cols"
    ng-model="obj.x">

    <option
      ng-repeat="col in meta_data.x_cols"
      value="{{col.id}}"
    >{{col.name}}</option>

</select>

answered Aug 11, 2014 at 5:53

Manish Kr. Shukla

4,4771 gold badge22 silver badges35 bronze badges

1 Comment

Yogesh Jindal Over a year ago

I don't like this approach for large lists as the rendering is much slower in IE 11/Edge (I am sure other previous versions of IE too)

Collectives™ on Stack Overflow

Binding both value and text in select dropdown in angular.js

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related