present nested data in table using angularjs - html

Question

Using angular 1.4.7
I have the following javascript object
var parents = [
{"name" : "John",
childs:[{ "name" : "Child1", age:"4"},{"name" : "Child2",age:"8"}]},
{"name" : "Peter",
childs:[{ "name" : "Child3", age:"5"},{"name" : "Child", age:"12"}]}
]
and I want to have the following output as html table
<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>
I have been trying using ng-repet-start to insert a new row (</tr><tr>) within the child loop.
<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>
The error I get in the console is:
Unterminated attribute, found 'ng-repeat-start' but no matching 'ng-repeat-end' found.
If I take out the </tr><tr> I get no error, but also not the desired output.

Answer 1

This code will give you almost the output you've asked (some extra <tbody> tags there, but it's still valid 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>
Here is working Plunk
I should say, that implementation is quite ugly. I would used <td rowspan="number_of children"> to achieve similar visual result. See implementation here, with rowspan and a little bit of bootstrap.
<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>
EDIT: updated Plunker
Dirty implementation for data with 'grandchildren'
$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

Try this instead:
<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>
The only difference of this with your desired output is that the parent name is displayed for all child rows