CODEWITHSUNDEEP
javascripthtmlangularjs
user202925
user202925

Reputation: 521

Dynamic variables in HTML and Angular?

I'm using ng-repeat through a list of objects that consist of displayNames and variables. For example, here is an example fields list:

"fields": [
    {"displayName": "Company Name", "variable": "name"},
    {"displayName": "Location of Product", "variable": "location"},
]

Currently I'm doing something like this:

<div ng-repeat="field in fields">
    <label class="control-label">{{field.displayName}}</label>
    model.{{field.variable}}
</div>

I want model.{{field.variable}} to display the value of the model.variable value. So for example, if field.displayName is "Company Name", then I want to display model.name.

I tried wrapping it all in curly braces {{model.{{field.variable}}}} but it didn't work.

Thanks!

Upvotes: 0

Views: 1217

Answers (1)

GG.
GG.

Reputation: 21834

You need to use the bracket notation when you have a dynamic key.

<div ng-repeat="field in fields">
    <label class="control-label">{{ field.displayName }}</label>
    {{ model[field.variable] }}
</div>

Upvotes: 4

Related Questions