Angularjs select ng-model binding for object

Question

I want to have a select for array of objects.example But somehow , I am not able to access properties of selected object.

js---

 $scope.test1={};
 $scope.test = [{'name':'test1'},{'name':'test2'},{'name':'test3'}];

html--

<select style="width:100px;height:25px;" ng-model="test1">
   <option  ng-repeat="attribute in test" value="{{attribute}}">{{attribute['name']}}</option>
</select>
{{test1}}
{{test1.name}}

here , test1.name comes blank.

you should use ng-options in this case rather than ng-repeat. option tags can only be bound to strings, so your test1 in this case is not an object, it is literally the string representation of the object. ng-options is designed to overcome this behavior. — Claies
– Claies, Commented Jan 20, 2016 at 11:42

RIYAJ KHAN · Accepted Answer · 2016-01-20 11:55:22Z

4

Do it using ngOpions this way.It gives proper controll than ng-repeat

<select style="width:100px;height:25px;" ng-model="test1"  
     ng-options="attribute.name  for  attribute in test">

Here is the Plunker

answered Jan 20, 2016 at 11:55

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

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

Comments

Hristo Enev · Accepted Answer · 2016-01-20 11:49:06Z

1

This is because the select value is interpreted as string. Not as object. And of course strings don't have name property. You can use ng-options if you want your values to contain the whole object. Read the documentation here.

answered Jan 20, 2016 at 11:49

Hristo Enev

2,5511 gold badge23 silver badges32 bronze badges

Collectives™ on Stack Overflow

Angularjs select ng-model binding for object

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related