AngularJS ng-repeat key on objects first property

Question

I like to build an select element for ordering data. I like to automatically create options for any property of an object.

Code

<select class="order" ng-model="model.order">
    <option value="{{key}}" ng-repeat="(key, value) in dataItems[0]">{{key}}</option>
</select>

Data

dataItem: {
 { firstname: "beate", lastname: "lind" }
 { firstname: "john", lastname: "rich" }
}

In this case it will take the first object and generate my select options.

score 2 · Accepted Answer · answered May 12 '14 at 00:01

2

It's not correct to use ng-repeat on a select tag. Please refer to the ng-options attribute which should behave more consistently and give you the desired result:

https://docs.angularjs.org/api/ng/directive/select

answered May 12 '14 at 00:01

Cranio

9,647
4
35
55

score 0 · Answer 2 · edited May 23 '17 at 11:57

@Cranio is correct, ngOptions is the correct method when using select. Using your code this is what it'd look like.

$scope.dataItem = [
 { firstname: "beate", lastname: "lind" }
 { firstname: "john", lastname: "rich" }
]

<select ng-model="model.order" ng-options="(name.firstname + ' ' + name.lastname) for name in dataItem">
    <option value="">[-- select --]</option>
</select>

Live DEMO

This SO post has a lot of helpful answers if you get stuck (there are several other things you can do with ngOptions) How do I set the value property in AngularJS' ng-options?

AngularJS ng-repeat key on objects first property

2 Answers2