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基本示例

＆＃13;

var app = angular.module('app', []);

app.controller('homeCtrl', function ($scope) {


    $scope.data = [{
        id: "1a",
        name: "apple"
    }, {
        id: "2a",
        name: "pear"
    }, {
        id: "3a",
        name: "banana"
    }];

    
   




});

＆＃13;

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

＆＃13;

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

＆＃13;

ng-repeat创建一个多嵌套表

1 个答案: