Question

这是我的模特：

$scope.orders = [
    {
        id: 234324,
      created: '2015-05-01T13:53:25.366Z',
      orderedBy: 'John Smith',
      items: [
        {
            itemNumber: '225-3',
          count: 3,
          state: 'Sent'
        },
        {
            itemNumber: '3423-1',
          count: 1,
          state: 'Waiting from supplier'
        }
      ]
    },
    {
        id: 423423,
      created: '2015-06-01T13:53:25.366Z',
      orderedBy: 'Eva Andersson',
      items: [
        {
            itemNumber: '423-3',
          count: 1,
          state: 'Sent'
        },
        {
            itemNumber: '234-3',
          count: 3,
          state: 'Sent'
        }
      ]
    }
  ]

它是一个包含订单的列表，其中每个订单都有一个包含项目的数组。

我想在表格中显示这一点。

我试过嵌套ng-repeats但是使用表的静态html语法证明它很难。我想我手动必须以某种方式添加子元素。我不太确定如何。

JsFiddle：http://jsfiddle.net/hadey1cf/4/

有什么想法吗？

Answer 1

为什么不使用嵌套重复？你第一次重复tbody并在里面重复这些项目的行：

http://jsfiddle.net/mcgraphix/kfnvLts0/1/

<table class="table">
<thead>
  <tr>
    <th>Order Id</th>
    <th>Orderd By</th>
    <th>Created</th>
    <th>Item id</th>
    <th>Count</th>
    <th>State</th>
  </tr>
</thead>

<tbody ng-repeat="order in orders">
  <tr class="active">
    <td><b>{{order.id}}</b></td>
    <td><b>{{order.orderedBy}}</b></td>
    <td>{{order.date | date:'yyyy-MM-dd'}}</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr ng-repeat="item in order.items">
    <td></td>
    <td></td>
    <td></td>
    <td>{{item.itemNumber}}</td>
    <td>{{item.count}}</td>
    <td><span class="label label-success label">{{item.state}}</span></td>
  </tr>
</tbody>
</table>

Answer 2

您可以拥有多个tbody，因此很容易做到：

JSFiddle

  <tbody ng-repeat="order in orders">
    <tr class="active">
      <td><b>{{order.id}}</b></td>
      <td><b>{{order.orderedBy}}</b></td>
      <td>{{order.created | date:'yyyy-MM-dd'}}</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr ng-repeat="item in order.items">
      <td></td>
      <td></td>
      <td></td>
      <td>{{item.itemNumber}}</td>
      <td>{{item.count}}</td>
      <td><span class="label label-success label">{{item.state}}</span></td>
    </tr>
  </tbody>

Answer 3

如果您出于某种原因不想在表中使用多个tbody，则另一种方法是使用ng-repeat-start和ng-repeat-end指令，如下所示：

<table class="table">
<thead>
  <tr>
    <th>Order Id</th>
    <th>Orderd By</th>
    <th>Created</th>
    <th>Item id</th>
    <th>Count</th>
    <th>State</th>
  </tr>
</thead>

<tbody>
  <!-- repeat will start with this but won't end with the closing tr tag
  Instead it will end at the ng-repeat-end directives closing tag. see below-->
  <tr class="active" ng-repeat-start="order in orders">
    <td><b>{{order.id}}</b></td>
    <td><b>{{order.orderedBy}}</b></td>
    <td>{{order.date | date:'yyyy-MM-dd'}}</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr ng-repeat="item in order.items">
    <td></td>
    <td></td>
    <td></td>
    <td>{{item.itemNumber}}</td>
    <td>{{item.count}}</td>
    <td><span class="label label-success label">{{item.state}}</span></td>
  </tr>
  <!-- the outer repeat will end when this tag is closed. I'm seeting "display:none" so that it doesn't show a gap in your table -->
  <tr ng-repeat-end><td colspan="6" style="display:none"></td></tr>
</tbody>
</table>

我认为我的第一个答案是更好的方法，因为从逻辑上讲，你的表中有一组内容，这就是tbody的用途。 HTML DTD声明有多个有效的HTML：

<!ELEMENT table
 (caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>

但是，了解ng-repeat-start和ng-repeat-end的工作方式很有用，因为在很多情况下这很有用。

Answer 4

您可以使用ng-repeat-start和ng-repeat-end指令。

您可以找到有关它的更多信息here

请参阅工作example

<script type="text/ng-template" id="orders.tmpl.html">
  <h2 class="page-header">Orders-directive</h2>

  <table class="table">
    <thead>
      <tr>
        <th>Order Id</th>
        <th>Orderd By</th>
        <th>Created</th>
        <th>Item id</th>
        <th>Count</th>
        <th>State</th>
      </tr>
    </thead>
    <tbody>
      <tr class="active" ng-repeat-start="order in orders">
        <td><b>{{order.id}}</b></td>
        <td><b>{{order.orderedBy}}</b></td>
        <td>{{order.date | date:'yyyy-MM-dd'}}</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr ng-repeat-end="" ng-repeat="item in order.items">
        <td></td>
        <td></td>
        <td></td>
        <td>{{ item.itemNumber }}</td>
        <td>{{ item.count }}</td>
        <td><span class="label" data-ng-class="{'label-success':item.state=='Sent', 'label-primary':item.state=='Waiting from supplier'}">{{ item.state }}</span></td>
      </tr>
    </tbody>
    {{content}}
</script>

使用指令将多行项添加到表中

4 个答案: