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

这是我的模型：

$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'
        }
      ]
    }
  ]

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

我想在表中显示这一点

我尝试过使用nest

ng repeats

，但使用表的静态html语法却很困难。我想我必须手动添加子元素。我真的不知道怎么做

JsFiddle：

---

有什么想法吗？

为什么不使用嵌套重复？在车身上进行第一次重复，并在车身内部对项目的行进行重复：

订单号
订购人
创建
项目id
计数
陈述
{{order.id}}
{{order.orderedBy}
{{order.date}日期：'yyyy-MM-dd'}
{{item.itemNumber}
{{item.count}
{{item.state}

您可以有多个

t车身

，这样做很容易：

{{order.id}}
{{order.orderedBy}
{{order.created}日期：'yyyy-MM-dd'}
{{item.itemNumber}
{{item.count}
{{item.state}

如果您出于某种原因不希望表中有多个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>

订单号
订购人
创建
项目id
计数
陈述
{{order.id}}
{{order.orderedBy}
{{order.date}日期：'yyyy-MM-dd'}
{{item.itemNumber}
{{item.count}
{{item.state}

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

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

---

但是，了解ng repeat start和ng repeat end的工作原理是很好的，因为在许多情况下，这是有用的。

您可以使用

ng repeat start

和

ng repeat end

指令

你可以找到更多关于它的信息

请看工作

订单指令
订单号
订购人
创建
项目id
计数
陈述
{{order.id}}
{{order.orderedBy}
{{order.date}日期：'yyyy-MM-dd'}
{{item.itemNumber}
{{item.count}
{{item.state}
{{content}}

对不起，什么不起作用？我能看到小提琴就像截图，我错过了什么。。这是一个又快又脏的问题，但我认为它解决了你的根本问题。也许你可以从那里开始，可能是重复的，而不是相关问题的重复，坦率地说，我认为从阅读这个问题中可以很清楚地看到这一点。

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

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

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