How to iterate over the keys and values with ng-repeat in AngularJS?
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' ]
we can follow below procedure to avoid display of key-values in alphabetical order.
Javascript
$scope.data = {
"id": 2,
"project": "wewe2012",
"date": "2013-02-26",
"description": "ewew",
"eet_no": "ewew",
};
var array = [];
for(var key in $scope.data){
var test = {};
test[key]=$scope.data[key];
array.push(test);
}
$scope.data = array;
HTML
<p ng-repeat="obj in data">
<font ng-repeat="(key, value) in obj">
{{key}} : {{value}}
</font>
</p>
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>
How about:
<table>
<tr ng-repeat="(key, value) in data">
<td> {{key}} </td> <td> {{ value }} </td>
</tr>
</table>
This method is listed in the docs: https://docs.angularjs.org/api/ng/directive/ngRepeat