Multi-line table rows using angular

Question

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!

Answer 1

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'
  }];
});

Answer 2

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>