CODEWITHSUNDEEP
javascriptangularjs
Vivek V Dwivedi
Vivek V Dwivedi

Reputation: 2615

How to access keys of an object dynamically inside angular template

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.

Upvotes: 0

Views: 780

Answers (2)

Jobin S Kumar
Jobin S Kumar

Reputation: 139

Try this...

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

Upvotes: 1

Suresh Gogu
Suresh Gogu

Reputation: 379

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

Upvotes: 0

Related Questions