0

次のような HTML を angular でレンダリングしようとしています。

  <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