angularjs ng-repeat selected option

Question

How to get the object of selected option in angular js using ng-repeat? Sample fiddle is here where myself populating the dropdown as,

<select ng-model="id" ng-init="id = '-1'" ng-change="select(option)">
    <option value="-1">--Select--</option>
    <option ng-repeat="option in list" value="{{option.id}}">{{option.name}}</option>
  </select>

If someone chose option with id=1, i want to get the object {id:1, name:'A' in $scope variable.

EDIT: Myself tried with ng-options but filtering is not happening as required based on previous dropdown selection. sample fiddle

Use ngOptions instead of manually repeating out the options. From the documentation: ngOptions should be used when the <select> model needs to be bound to a non-string value. — tasseKATT
– tasseKATT, Commented Jun 3, 2016 at 5:48
Correct.. But if I use ng-options filter won't working properly fiddle: jsfiddle.net/mpsbhat/779pz05o/5 — mpsbhat
– mpsbhat, Commented Jun 3, 2016 at 6:28

adiinstack · Accepted Answer · 2016-06-03 05:45:37Z

1

Use option object in ng-value={{option}} and whenever u select an option your scope.id will have the desired object. Basically ur ng-model gets populated with selected value.

answered Jun 3, 2016 at 5:45

adiinstack

965 bronze badges

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

Comments

Usman Khan · Accepted Answer · 2016-06-03 05:45:52Z

0

Just you have to change your option to this

<option ng-repeat="option in list" value="{{'Id : ' + option.id + ' Name : '  + option.name }}">{{option.name}}</option>

Hope this will work for you and you were looking for the same result

answered Jun 3, 2016 at 5:45

Usman Khan

3591 silver badge13 bronze badges

Comments

Aravinthan K · Accepted Answer · 2016-06-03 05:52:44Z

0

You have 2 option to get as Object.

option 1 :

you can use Filter to get Object

<select ng-model="id" ng-init="id = '-1'" ng-change="select((list|filter:{id:id}))">
    <option value="-1">--Select--</option>
    <option ng-repeat="option in list" value="{{option.id}}">{{option.name}}</option>
 </select>

updated fiddler here

option 2 :

set your value as Object (option)

<select ng-model="id" ng-init="id = '-1'" ng-change="select(option)">
    <option value="-1">--Select--</option>
    <option ng-repeat="option in list" value="{{option}}">{{option.name}}</option>
  </select>

edited Jun 3, 2016 at 5:52

answered Jun 3, 2016 at 5:46

Aravinthan K

1,9012 gold badges20 silver badges24 bronze badges

Collectives™ on Stack Overflow

angularjs ng-repeat selected option

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related