我有一个如下结构的表:
<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 中的所有值重复。我要添加的行将是进一步的向下钻取。
最佳答案
您可以使用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>
关于html - ng-repeat 创建一个多嵌套表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26654321/