Question

我正在使用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

但我不知道怎么做！

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

Answer 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>

使用角度的多行表行

2 个答案: