How to access keys of an object dynamically inside angular template

Question

I am creating a list using ng-repeat like this:

<li ng-repeat="(key, value) in Myctrl.data"> {{Myctrl.resources.key}}</li>

Myctrl.data will look somthing like this:

{
personal : 
    {a: 100, b: 120}, 
professional : 
    { a: 320, b : 410}
}

Now in MyCtrl I have some mappings in resources object for each of the keys obtained from ng-repeat and I want to get the values of these keys and put it in list items.

$scope.resources = {
    personal: "Personal Details",
    professional: "Professional Details",
    freelance: "Freelance Details",
    custom: "Custom Details"
}

So when my ng-repeat is executed, I will get personal, professional etc and I want to substitute the values from resources object in my HTML.

How can I replace key in {{Myctrl.resources.key}} with actual value of key obtained in ng-repeat.

What keys does Myctrl.data contains? and can u explain what you exactly need? — Suresh Gogu
– Suresh Gogu, Commented Sep 20, 2016 at 11:48

Community · Accepted Answer · 2016-09-20 12:39:44Z

1

Try this...

<li ng-repeat="(key, value) in Myctrl.data">{{Myctrl.resources[key]}}</li>

edited Sep 20, 2016 at 12:39

CommunityBot

11 silver badge

answered Sep 20, 2016 at 11:58

Jobin S Kumar

1391 silver badge6 bronze badges

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

2 Comments

Vivek V Dwivedi Over a year ago

I am not looking for this. I want to take the key and access a value from resources object which has the same key.

Jobin S Kumar Over a year ago

Sry, my bad! Try the below one... <li ng-repeat="(key, value) in Myctrl.data">{{Myctrl.resources[key]}}</li>

Suresh Gogu · Accepted Answer · 2016-09-20 12:09:08Z

0

<li ng-repeat="(key, value) in Myctrl.data"> {{resources.key}}</li>

will produces output list items as

Personal Details
Professional Details

Because in your repeat will produces

firsttime key is personal 
    {{resources.personal}} => Personal Details
secondtime key is professional
    {{resources.professional}} => Professional Details

This is how it works exactly, what you actually looking for is this only?

edited Sep 20, 2016 at 12:09

answered Sep 20, 2016 at 12:02

Suresh Gogu

3895 silver badges12 bronze badges

3 Comments

Vivek V Dwivedi Over a year ago

Did you even test this code? This is exactly what I have written. It doesn't work.

Suresh Gogu Over a year ago

Yeah it wont work that's why i changed it {{Myctrl.resources.key}} to {{resources.key}}

Vivek V Dwivedi Over a year ago

Its an instance variable from controller. There is nothing as resources. We can actually access using keys instead of dot notation. That does the trick.

Collectives™ on Stack Overflow

How to access keys of an object dynamically inside angular template

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related