本嵌套数据使用angularjs

Question

使用角1.4.7

我有以下的javascript对象

var parents = [ 
    {"name" : "John", 
     childs:[{ "name" : "Child1", age:"4"},{"name" : "Child2",age:"8"}]}, 
    {"name" : "Peter", 
     childs:[{ "name" : "Child3", age:"5"},{"name" : "Child", age:"12"}]} 
] 

，我想具有以下输出HTML表格

<table> 
 
    <tr> 
 
     <td>John</td> 
 
     <td>Child1</td> 
 
     <td>4</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td>Child2</td> 
 
     <td>8</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Peter</td> 
 
     <td>Child3</td> 
 
     <td>5</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td>Child3</td> 
 
     <td>12</td> 
 
    </tr> 
 
</table>

我一直在试着sing ng-repet-start在子循环内插入新行（</tr><tr>）。

<tr ng-repeat-start="parent in parents"> 
    <td > 
     {{parent.name}} 
    </td> 
    <td ng-repeat-start="child in parent.childs"> 
     {{child.name}} 
    </td> 
    <td> 
     {{child.age}} 
<!--new row within child loop and --> 
</tr> 
<tr> 
    <td></td> 
    <td ng-repeat-end></td> 
<tr ng-repeat-end></tr> 

我在控制台得到的错误是：

属性未结束，发现 'NG-重复启动'，但没有匹配的 'NG-重复端' 找到。

如果我拿出</tr><tr>我得到没有错误，但也不是所需的输出。

Answer 1

此代码会给你几乎你问输出（一些额外的<tbody>标签存在，但它仍然是有效html）：

<table> 
    <tbody ng-repeat="parent in parents"> 
     <tr ng-repeat="child in parent.childs"> 
     <td ng-if = "$index == 0">{{parent.name}}</td> 
     <td ng-if = "$index != 0"></td> 
     <td > 
      {{child.name}} 
     </td> 
     <td>{{child.age}}</td> 
     </tr> 
    </tbody> 
</table> 

她e正在工作Plunk

我应该说，这个实现相当难看。我会用<td rowspan="number_of children">来达到类似的视觉效果。请参阅实施here，与rowspan和一点引导。

<table class = "table table-condensed"> 
    <tbody ng-repeat="parent in parents"> 
     <tr ng-repeat="child in parent.childs"> 
     <td ng-if="$index == 0" rowspan="{{parent.childs.length}}">{{parent.name}}</td> 
     <td> 
      {{child.name}} 
     </td> 
     <td>{{child.age}}</td> 
     </tr> 
    </tbody> 
</table> 

编辑：更新Plunker

脏实现数据与 '孙子'

$scope.withGrandChildren = [ 
{"name" : "John", 
    childs:[ 
    { "name" : "Child1", 
     age:"42", 
     grandchildrens:[ 
     {"name":"Graddchildren1_1", age:"12"} , 
     {"name":"Grandchildren1_2", age:"17"} 
     ] 
    }, 
    { "name" : "Child2", 
     age:"38", 
     grandchildrens:[ 
     {"name":"Graddchildren2_1", age:"19"} 
     ] 
    } 
    ] 
}, 
{"name" : "Peter", 
    childs:[ 
    { "name" : "Child3", age:"45"}, 
    {"name" : "Child", age:"12"} 
    ] 
} 
] 

Answer 2

试试这个：

<tbody ng-repeat="parent in parents"> 
    <tr ng-repeat="child in parent.childs"> 
     <td>{{parent.name}}</td> 
     <td > 
      {{child.name}} 
     </td> 
     <td>{{child.age}}</td> 
    </tr> 
</tbody> 

这与你的期望输出，唯一不同的是，parent name则显示所有child rows