0
的第一个片段显示了我想要的输出:采用NG-重复创建嵌套表
<table>
<tr>
<th rowspan="2">Name</th>
<th rowspan="2">Place</th>
<th colspan="3">Date1</th>
<th colspan="3">Date2</th>
</tr>
<tr>
<th>DD</th>
<th>MM</th>
<th>YYYY</th>
<th>DD</th>
<th>MM</th>
<th>YYYY</th>
</tr>
<tr>
<td>Test</td>
<td>US</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>09</td>
<td>2017</td>
</tr>
</table>
在这个片断我试图执行表的创建。 $scope.tableData
保存数据。我使用属性tableHead
来初始化表头。在我的用例var1
,var2
和var3
总是存在,但var3
的嵌套属性可以是可变的。这意味着有时可能会有一个var5_4
或一个Date3
。此外,数据并不总是包含tableHead中指定的所有属性。由于这个问题,我正在寻找一种方法来创建我的表。
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.tableData = {
'tableHead': {
'var1': 'Name',
'var2': 'Place',
'var3': [{
'var4': 'Date1',
'var5': [{
'var5_1': 'DD'
}, {
'var5_2': 'MM'
},
{
'var5_3': 'YYYY'
}
]
}, {
'var4': 'Date2',
'var5': [{
'var5_1': 'DD'
}, {
'var5_2': 'MM'
}, {
'var5_3': 'YYYY'
}]
}]
},
'tableData': [{
'var1': 'Test',
'var2': 'US',
'var3': [{
'var4': 'Date2',
'var5': [{
'var5_2': '09',
'var5_3': '2017'
}]
}]
}]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr>
<th rowspan="2">Name</th> <!--always present, no need for ng-repeat-->
<th rowspan="2">Place</th> <!--always present, no need for ng-repeat-->
<th ng-repeat="x in tableData.tableHead.var3" colspan="x.var5.length" >{{x.var4}}</th>
</tr>
<!-- how to create the second table head row !? -->
<!-- how to create the data rows !? -->
</table>
</div>
但是如果有可能下一次在数据'd.date3.dd'和'd.date3.mm'和'd.date3.yyyy'或者d.date3.yyyy或者更多的日期。这个解决方案太僵化了。 – d4rty
那么_dateX_元素数没有限制? –
是的,没有限制 – d4rty