0

我正在尝试使用 Angular 渲染看起来像这样的 HTML：

  <table>
  ...
        <tr>
            <td colspan="4"><b>title</b></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td colspan="3">detail</td>
        </tr>

每个项目都有一个明细行。

我的数据如下所示：

$scope.Data = {
  ItemList: [{
    "Name": "Bubba",
    "List": [
      {
        item1: 7,
        item2: 3,
        item3: 4,
        comment: "comment 1 "
      },
      {
        item1: 7,
        item2: 3,
        item3: 4,
        comment: "comment 2 "
      },
      {
        item1: 7,
        item2: 3,
        item3: 4,
        comment: "comment 3 "
      }]
        }, {
    "Name": "Bubba2",
    "List": [{
        item1: 7,
        item2: 3,
        item3: 4,
        comment: "comment 4 "
      },
      {
        item1: 7,
        item2: 3,
        item3: 4,
        comment: "comment 5 "
      },
      {
        item1: 7,
        item2: 3,
        item3: 4,
        comment: "comment 6 "
      }]
  }];
}

这是我一直在使用的模板：

  <table>
    <thead>
        <tr>
            <td>header</td>
            <td>col1</td>
            <td>col2</td>
            <td>col3</td>
        </tr>
    </thead>

    <tbody ng-repeat="j in Data.ItemList">
            <td colspan="4"><b>{{j.Name}}</b></td>
        </tr>
        <tr ng-repeat="k in j.List">
            <td>&nbsp;</td>
            <td>{{k.item1}}</td>
            <td>{{k.item2}}</td>
            <td>{{k.item3}}</td>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td colspan="3">{{k.comment}}</td>
        </tr>

    </tbody>
</table>

它不会呈现注释，因为它在循环 tr 之外。

是否有可能做到这一点？我尝试了一些东西，但似乎没有任何效果。

这是我所在的位置：http ://plnkr.co/edit/7YtEX1?p=preview

4

1 回答 1

1

Angular 1.2 有一个名为的新指令ng-repeat-start，ng-repeat-end它应该允许您尝试的内容。请参阅文档。

<tbody>
    <tr ng-repeat-start="j in Data.ItemList">
        <td colspan="4"><b>{{j.Name}}</b></td>
    </tr>
    <tr ng-repeat="k in j.List">
        <td>&nbsp;</td>
        <td>{{k.item1}}</td>
        <td>{{k.item2}}</td>
        <td>{{k.item3}}</td>
    </tr>
    <tr ng-repeat-end>
        <td>&nbsp;</td>
        <td colspan="3">{{k.comment}}</td>
    </tr>
</tbody>

但是，您似乎正在尝试使用表格来实现非表格数据的特定布局。如果我站在你的立场上，我会使用其他一些 HTML 标记。

于 2013-11-06T16:41:02.593 回答