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

angularjs angularjs-ng-repeat
Brian Flanagan picture Brian Flanagan · Jun 8, 2012 · Viewed 68.2k times · Source

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>

Answer

Andrew Joslin picture Andrew Joslin · Jun 8, 2012

Try this:

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

Related questions

AngularJS For Loop with Numbers & Ranges

Angular does provide some support for a for loop using numbers within its HTML directives: <div data-ng-repeat="i in [1,2,3,4,5]"> do something </div> But if your scope variable includes a range that has a dynamic number then …

Read More
How to iterate over the keys and values with ng-repeat in AngularJS?

In my controller, I have data like: $scope.object = data Now this data is the dictionary with keys and values from json. I can access the attribute with object.name in the template. Is there any way that I can …

Read More
Way to ng-repeat defined number of times instead of repeating over array?

Is there a way to ng-repeat a defined number of times instead of always having to iterate over an array? For example, below I want the list item to show up 5 times assuming $scope.number equal to 5 in addition incrementing …

Read More