0

angular.js を使用して、次のようなテーブルを作成しています。

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

注文ごとに 2 行目を追加したいので、表は次のようになります。

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

でも方法がわからない！

4

2 に答える 2

3

これを解決する方法のCodePen の実例を作成しました。

関連する 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'
  }];
});
于 2013-10-04T15:36:51.387 に答える