I am using angular.js to make a table like this:
<table>
<tr ng-repeat="order in orders">
<td>
{{order.custName}} ...(several columns)
</td>
</tr>
</table>
I would like to add a 2nd row for each order, so the table looks something like this:
order1ID order1Name order1Amnt
order1Comment
order2ID order2Name order2Amnt
order2Comment
order3ID order3Name order3Amnt
order3Comment
but I don't know how!
I have created a working CodePen example of how to solve this.
Relevant HTML:
<section ng-app="app" ng-controller="MainCtrl">
<table class="table table-bordered">
<thead>
<tr>
<th>Order ID</th>
<th>Order Name</th>
<th>Order Amount</th>
</tr>
</thead>
<tbody ng-repeat="order in orders">
<tr>
<td>{{order.id}}</td>
<td>{{order.name}}</td>
<td>{{order.amount}}</td>
</tr>
<tr>
<td colspan="3">
{{order.comment}}
</td>
</tr>
</tbody>
</table>
</section>
Relevant javascript:
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.orders = [{
id: '001',
name: 'Order 1 Name',
amount: 100.00,
comment: 'Order 1 comment goes here'
},{
id: '002',
name: 'Order 2 Name',
amount: 150.00,
comment: 'Order 2 comment goes here'
}];
});
Using Angular 1.2:
<table>
<tr ng-repeat-start="x in stuff">
<td>{{x.name}}</td>
</tr>
<tr ng-repeat-end="">
<td>{{x.value}}</td>
</tr>
</table>
ng-repeat directive as an element like this <ng-repeat loop="order in orders"><tr>...</tr><tr>...</tr></ng-repeat>
