AngularJS - How can I reference the property name within an ng-Repeat

Question

In addition to rendering the value of the properties in an object, I'd also like to render the property name as a label. Is there a way to do this with ng-repeat? For example:

<ul>
    <li ng-repeat="option in data">{{propertyName}}: {{option}}</li>
</ul>

Which might spit out something like this:

<ul>
    <li>Name: John</li>
    <li>Phone: (123) 456-7890</li>
    <li>Country: England</li>
</ul>

score 342 · Accepted Answer · answered Jun 08 '12 at 19:31

342

Try this:

<ul>
    <li ng-repeat="(key,val) in data">{{key}}: {{val}}</li>
</ul>

answered Jun 08 '12 at 19:31

Andrew Joslin

43,033
21
100
75

30

@Andy - they aren't so great, actually. They need more simple actual code examples like you have shown here. Thanks for your answer and please keep posting to StackOverflow; your post really helped me understand how to access the AngularJS docs. Best regards and upvote! – noogrub Jul 01 '12 at 10:01
so easy but didn't think of it :D tnx! – Guntram Aug 22 '14 at 09:55
what to do if i have a function like --- myFunc(key) --- that need the key value this gonne show me the name key in html and not the value – Nejmeddine Jammeli Jun 06 '15 at 14:09

score 28 · Answer 2 · edited Apr 07 '15 at 05:31

28

The problem with documentation is that it says (key, value) with that space ... it took me some time to figure out that because of that it doesn't work

edited Apr 07 '15 at 05:31

d-_-b

21,536
40
150
256

answered Oct 29 '12 at 16:04

pauldcomanici

597
5
15

1

Thanks so much. You are right. You cannot have a space between the comma and the value. (key,value) not (key, value). – Chad DeShon Apr 11 '13 at 22:10
9

Maybe things are different in newer releases of Angular, but you can have a space between `(key, val)`. That's often how I do it. – EnigmaRM Jun 19 '13 at 16:51
I found (key, value) didn't work for me. Are you saying it's because of the whitespace??? Geez! But thanks. – code-sushi Aug 07 '14 at 15:55
2

Works for me with the space as well. – Shawn Lauzon Aug 17 '14 at 01:42
val vs value affecting the space? – Danny Mahoney Mar 21 '16 at 05:06

AngularJS - How can I reference the property name within an ng-Repeat

2 Answers2

Linked

Related