使用角度的多行表格行答案

【问题标题】：Multi-line table rows using angular使用角度的多行表格行
【发布时间】：2017-01-03 07:27:42
【问题描述】：

我正在使用 angular.js 制作这样的表格：

<table>
    <tr ng-repeat="order in orders">
        <td>
            {{order.custName}} ...(several columns)
        </td>
    </tr>
</table>

我想为每个订单添加第二行，所以表格如下所示：

order1ID   order1Name   order1Amnt
order1Comment
order2ID   order2Name   order2Amnt
order2Comment
order3ID   order3Name   order3Amnt
order3Comment

但我不知道怎么做！

【问题讨论】：

标签： html angularjs html-table

【解决方案1】：

我创建了一个working CodePen example 来说明如何解决这个问题。

相关 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>

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

【讨论】：

【解决方案2】：

使用 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>

【讨论】：

我知道这是正确的解决方案（使用 Angular 1.2+ 时），但我一点也不喜欢这个。我宁愿看到他们能够使用 ng-repeat 指令作为像这样的元素 <ng-repeat loop="order in orders"><tr>...</tr><tr>...</tr></ng-repeat>
这应该可以，但不能。一旦我添加了“-start”，就根本没有输出！
@user2429448 这是 Angular 1.2