本嵌套數據使用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