Dynamic variables in HTML and Angular?

Question

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!

GG. · Accepted Answer · 2016-04-19 18:32:42Z

4

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>

edited Apr 19, 2016 at 18:32

answered Apr 19, 2016 at 18:19

GG.

22k14 gold badges93 silver badges133 bronze badges

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

Collectives™ on Stack Overflow

Dynamic variables in HTML and Angular?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related