Currently, I have an Angular template code that displays the header on the left and data on the right in a top to bottom layout.
<div class="panel-body">
<table class="table table-striped">
<tr ng-repeat="f in fields">
<th>{{ f }}</th>
<td>{{ data[f] }}</td>
</tr>
</table>
</div>
However, I now want to modify this layout so that instead of displaying one field per row, I want to display two fields in one row, and then the third and fourth fields in the following row, and so on.
Essentially, I am looking for a 2-column layout with the field values distributed accordingly.
<tr><th>{{ f }}</th>
<td>{{ data[f] }}</td>
<th>{{ f }}</th>
<td>{{ data[f] }}</td>
</tr>
field = ['id', 'name', 'username', 'email', 'age']
data = [{id:1, name: 'john', username: 'john', age: 20, email: 'test'}]
The desired output should look like:
<tr><td>id:</td><td>1</td><td>name:</td><td>john</td></tr>
<tr><td>username:</td><td>john</td><td>age:</td><td>20</td></tr>
This formatting requirement must be achieved using ng-repeat rather than hard coding each row.