HTML: How to fill rows that 1st row is parent and following rows are children using AngularJs - html

Question

I'm having an Angular Js like this
function Ctrl($scope) {
$scope.gardens = [
{garden:'1', trees: ["a", "b", "c", "d"]},
{garden:'2', trees: ["e", "f", "g", "h"]},
{garden:'3', trees: ["i", "k", "l", "m"]}
];
}
Now I want to display it in an html table as follow:
|Garden|Tree|
|1 |
| |a |
| |b |
| |c |
...
|2 |
| |e |
| |f |
| |g |
I can do this manually with DOM but have no solution with AngularJS.
(What I tried on html code:
<table ng-app="" ng-controller="Ctrl">
<tr ng-repeat="garden in gardens">
<td>{{garden.garden}}</td>
</tr>
</table>
)
Please help!
Johnny

Answer 1

You can do like this:
http://jsfiddle.net/ffVeu/
This is a base, just use it to produce a prettier HTML ;)
HTML
<div ng-app>
<table ng-controller="Ctrl">
<tr>
<th>Garden</th>
<th>Tree</th>
</tr>
<tr ng-repeat="garden in gardens">
<td class="firstColumn">{{garden.garden}}</td>
<td>
<table>
<tr ng-repeat="tree in garden.trees"><td>
{{tree}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
CSS (ugly, just to show the result, do not use this...)
</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->
<link rel="stylesheet"
href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js">
</script>
<style>
.done-true {
text-decoration: line-through;
color: grey;
}
.firstColumn{
vertical-align: top;
}
table, tr, td {
padding: 2px;
margin: 20px;
text-align: center;
}
th {
background-color: silver;
color: white;
font-weight: bold;
padding: 10px;
}
tr{
border: 1px solid silver;
}
tr tr{
border: none;
}