CODEWITHSUNDEEP
javascriptangularjs
MR.ABC
MR.ABC

Reputation: 4862

AngularJS ng-repeat key on objects first property

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.

Upvotes: 0

Views: 589

Answers (2)

EnigmaRM
EnigmaRM

Reputation: 7632

@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?

Upvotes: 0

Cranio
Cranio

Reputation: 9837

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

Upvotes: 2

Related Questions