How can I iterate over the keys, value in ng-repeat in angular

Question

How can I iterate over the keys, value in ng-repeat in angular

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 iterate over the keys as well and display them in table like

<tr><td> {{key}} </td> <td> data.key </td>

The data is like this

{
    "id": 2,
    "project": "wewe2012",
    "date": "2013-02-26",
    "description": "ewew",
    "eet_no": "ewew",
}

angularjs
ng-repeat

Answer 1

How about:

<tr ng-repeat="(key, value) in data">
  <td> {{key}} </td> <td> {{ value }} </td>
</tr>

This method is listed in the docs: http://docs.angularjs.org/api/ng.directive:ngRepeat

Answer 2

If you would like to edit the property value with two way binding:

<tr ng-repeat="(key, value) in data">
    <td>{{key}}<input type="text" ng-model="data[key]"></td>
</tr>

Answer 3

I don't think there's a builtin function in angular for doing this, but you can do this by creating a separate scope property containing all the header names, and you can fill this property automatically like this:

var data = {
  foo: 'a',
  bar: 'b'
};

$scope.objectHeaders = [];

for ( property in data ) {
  $scope.objectHeaders.push(property); 
}

// Output: [ 'foo', 'bar' ]

Answer 4

Here's a working example:

<div class="item item-text-wrap" ng-repeat="(key,value) in form_list">
  <b>{{key}}</b> : {{value}}
</div>

edited