html - 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 |
| |一个 |
| |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>

)

请帮忙！

约翰尼

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