AngularJS dynamic scope name in HTML

Question

I'm not sure if it's possible but...

I have an object to display, something similar to:

{
    "choose": [
        {
            "name": "first name",
            "key": "key1",
            "fields": {
                "a": "first",
                "b": "second"
        },
        {
            "name": "second name",
            "key": "key2",
            "fields": {
                "a": "third",
                "b": "last"
        }
    ],
    "key1": "some value",
    "key2": "some value"
}

Object is stored in "object", lets say. In HTML I'm repeating "choose" but also I need to display value of "key1" and "key2" (which can be any name) according to "choose" array.

 <div ng-repeat="field in object.choose">
     <p>{{ field.name }}</p>
     <p>{{ object. + field.key }}</p> // this doesn't work, displays only value of "field.key"
 </div>

So how can I select and display "object.key1" and "object.key2" according to value of "[0].key" and "[1].key"?

Mathew Berg · Accepted Answer · 2014-06-12 11:39:30Z

1

Like so?

<div ng-repeat="field in object.choose">
    <p>{{ field.name }}</p>
    <p>{{ object[field.key] }}</p>
</div>

answered Jun 12, 2014 at 11:39

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

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

1 Comment

Julius Over a year ago

Thanks, it worked. I was trying like this before but with a dot: object.[field.key] and it wasn't working. Cheers again.

Collectives™ on Stack Overflow

AngularJS dynamic scope name in HTML

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related