Angular js table with dynamic columns and values - angularjs

Question

I have a data structure as follow;
[
{
"a1": 941,
"b1": "abc",
"c1": "aaa",
"a2": 27103,
"b2": "ttt",
"c2": "zzz"
},
{
"a1": 456,
"b1": "xxx",
"c1": "yyy",
"a2": 7632,
"b2": "mmm",
"c2": "nnn"
}
]
I use angular js table with dynamic column names which are different from keys in the structure. Since there are many of them, I do not want to write key names like;
<table st-table="table_data_raw" style="" class="table table-striped forms-list-table">
<tr>
<th ng-repeat="dateColumnName in dateColumnNames ">{{ dateColumnName }}
</th>
</tr>
<tbody>
<tr ng-repeat="row in data">
<td>{{row.a1 }}</td>
<td>{{row.b1 }}</td>
<td>{{row.a2 }}</td>
<td>{{row.b2 }}</td>
<td>{{row.c2 }}</td>
</tr>
</tbody>
</table>
How can I get table values dynamically without specifying their names in that structure from "data"?

Answer 1

Try using $index to refer to the ng-repeat item you wish to access (in your example it would be index 0 or 1). Here is code/fiddle (click items in the table to get their value dynamically):
https://jsfiddle.net/AdamKMorris/ox89o7L0/
using $Index:
<tr ng-repeat="row in data">
<td ng-click="chosenValueA1($index);">{{row.a1 }}</td>
...
</tr>
Then the angularJs:
$scope.chosenValueA1 = function(i)
{
$scope.myValue = $scope.data[i].a1;
}
If you want to access a1,a2,b1,b2, etc. then you will need to nest ng-repeat and use $index for each to refer to the value.