HTML：如何使用 AngularJs 填充第一行是父行和后续行是子行的行

Posted 2023-03-05

【中文标题】HTML：如何使用 AngularJs 填充第一行是父行和后续行是子行的行

【英文标题】：HTML: How to fill rows that 1st row is parent and following rows are children using AngularJs

【发布时间】：2012-12-22 02:36:58

【问题描述】：

我有一个像这样的 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>

)

请帮忙！

强尼

【参考方案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，您的解决方案有帮助！太感谢了！ :)