次のような HTML を angular でレンダリングしようとしています。
<table>
...
<tr>
<td colspan="4"><b>title</b></td>
</tr>
<tr>
<td> </td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td> </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> </td>
<td>{{k.item1}}</td>
<td>{{k.item2}}</td>
<td>{{k.item3}}</td>
</tr>
<tr>
<td> </td>
<td colspan="3">{{k.comment}}</td>
</tr>
</tbody>
</table>
ループする tr の外側にあるため、コメントはレンダリングされません。
これを行うことは可能ですか?私はいくつかのことを試しましたが、何もうまくいかないようです。
ここに私がこれでいる場所のプランカーがあります: http://plnkr.co/edit/7YtEX1?p=preview