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

AngularjsAngularjs Ng-Repeat

Angularjs Problem Overview


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>

Angularjs Solutions


Solution 1 - Angularjs

Try this:

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

Solution 2 - Angularjs

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionBrian FlanaganView Question on Stackoverflow
Solution 1 - AngularjsAndrew JoslinView Answer on Stackoverflow
Solution 2 - AngularjspauldcomaniciView Answer on Stackoverflow