HTML: 如何使用AngularJs填写第一行为父级，后续行为子级的行？

Question

我正在使用类似于 Angular Js 的技术，代码如下：

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"]}
      ];
}

现在我想把它显示在一个html表格中，如下所示:

|花园|树|
|1          |
|      |a   |
|      |b   |
|      |c   |
...
|2          |
|      |e   |
|      |f   |
|      |g   |

我可以使用DOM手动完成此操作，但是在AngularJS中没有解决方案。

（我尝试在html代码上的内容：

<table ng-app="" ng-controller="Ctrl">
  <tr ng-repeat="garden in gardens">
    <td>{{garden.garden}}</td>
  </tr>
</table>

)

请帮忙！

约翰尼

- Johnny

Answer 1

您可以这样做：

http://jsfiddle.net/ffVeu/

这是一个基础，只需使用它来生成更漂亮的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（丑陋的，只是为了展示结果，请勿使用...）

</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;
}

- Andrea Ligios