html - ng-repeat 创建一个多嵌套表

Question

我有一个如下结构的表:

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody ng-repeat="singleArray in groupOfArrays">
        <tr>
            <td>{{calcTotalObj(singleArray).x}}</td>
            <td>{{calcTotalObj(singleArray).y}}</td>
            <td>{{calcTotalObj(singleArray).z}}</td>
        </tr>
        <tr ng-repeat="item in singleArray"> <!-- scope of item starts here -->
            <td style='padding-left:30px;'>{{item.x}}</td>
            <td>{{item.y}}</td>
            <td>{{item.z}}</td>
        </tr> <!-- scope of item ends here -->
        <!-- here is where I want to add the row I describe below -->
    </tbody>
</table>

(注意:当我在下面说“嵌套”时，我并不是指在实际的“表中表”意义上嵌套，因为我希望它看起来像行组合在一起，而不是多个表彼此嵌套)

但是，我需要在 tbody 的第二行下方添加一层额外的嵌套。我不认为有任何 HTML 是允许的，只是添加另一行表单:

<tr ng-repeat="nest in item">
    <td style='padding=left:50px'>
........
</tr>

不起作用，因为我不再在前一行中使用循环变量 item。

如何添加这个额外的嵌套级别？还是应该重组？

编辑:groupOfArrays 的结构

groupOfArrays = 
{ array[
    obj = { x=1,y=2, z=4 }
   ,obj2 = { x=3, y=6, z=8 }
   ,obj3 = { x=5, y=9, z=3 }
   ]
}

所以 calcTotalObj()(我意识到我之前遗漏了)将计算内部对象中的值的总和(例如，x，在上面的示例中).它将返回一个相同类型但总计值的对象。第二行将是上一行的向下钻取，并将对 groupOfArrays 中的所有值重复。我要添加的行将是进一步的向下钻取。

Answer 1

您可以使用ng-repeat-start, ng-repeat-end 下面的基本示例

var app = angular.module('app', []);

app.controller('homeCtrl', function ($scope) {


    $scope.data = [{
        id: "1a",
        name: "apple"
    }, {
        id: "2a",
        name: "pear"
    }, {
        id: "3a",
        name: "banana"
    }];

    
   




});

tr.border_bottom td {
  border-bottom:1pt solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

 <div ng-app="app">
    <div ng-controller="homeCtrl">
      
      <table>
        <tr ng-repeat-start="item in data" class="border_bottom"><td>{{$index}}</td><td>{{item.id}}</td></tr>
        <tr ng-repeat-end class="border_bottom"><td></td><td>{{item.name}}</td></tr>
      </table>


    
      
      
    </div>
    </div>