[英]Nested ng-repeat in AngularJS
我有以下JSON:
{ "ListNhomThanhTra": [
{
"ListKeHoachThanhTra": [
{
"ListDoiTuong": [
{
"MA_DV_DUOC_TT": "DT01",
"TEN_DOITUONG": "Tỉnh Bắc Ninh",
"stt": 1.1
}
],
"MA_DM_KEHOACH_TT": "KH13072018003",
"TEN_KEHOACH": "Kế hoạch chính thức",
"stt": 1
}
],
"MA_NHOM_TT": "010",
"TEN_NHOM": "Thanh tra ngân sách địa phương",
"stt": "I"
},
{
"ListKeHoachThanhTra": [
{
"ListDoiTuong": [
{
"MA_DV_DUOC_TT": "DT01",
"TEN_DOITUONG": "Tỉnh Bắc Ninh",
"stt": 1.1
}
],
"MA_DM_KEHOACH_TT": "KH13072018003",
"TEN_KEHOACH": "Kế hoạch chính thức",
"stt": 1
}
],
"MA_NHOM_TT": "02",
"TEN_NHOM": "Thanh tra tài chính, bộ ngành",
"stt": "II"
}
],
"MA_LOAI_TT": "01",
"TEN_LOAI": "Kế hoạch thanh tra",
"stt": "A"
}
當前,我有一個像這樣的JSON字符串,我想以表格形式顯示它。
我嘗試使用下面的代碼,但是它僅在第二個ng-repeat處停止,並且不再進行下去,所以我想知道如何正確執行?
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<tbody ng-repeat="loaiThanhTra in dataTable">
<td>{{loaiThanhTra.stt}}</td>
<td>{{loaiThanhTra.TEN_LOAI}}</td>
<tr ng-repeat="nhomThanhTra in loaiThanhTra.ListNhomThanhTra">
<td>{{nhomThanhTra.stt}}</td>
<td>{{nhomThanhTra.TEN_NHOM}}</td>
<tr ng-repeat="keHoachThanhTra in nhomThanhTra.ListKeHoachThanhTra ">
<td>{{keHoachThanhTra.stt}}</td>
<td>{{keHoachThanhTra.TEN_KEHOACH}}</td>
<tr ng-repeat="doiTuongThanhTra in keHoachThanhTra.ListDoiTuong">
<td>{{doiTuongThanhTra.stt}}</td>
<td>{{doiTuongThanhTra.TEN_DOITUONG}}</td>
</tr>
</tr>
</tr>
</tbody>
請幫我!!!
您在tds中不能有trs。 在父對象上使用ng-container和行跨度。
<tbody ng-repeat="loaiThanhTra in dataTable">
<td>{{loaiThanhTra.stt}}</td>
<td>{{loaiThanhTra.TEN_LOAI}}</td>
<tr ng-repeat="nhomThanhTra in loaiThanhTra.ListNhomThanhTra">
<td rowspan="nhomThanhTra.ListKeHoachThanhTra.length">{{nhomThanhTra.stt}}</td>
<td rowspan="nhomThanhTra.ListKeHoachThanhTra.length">{{nhomThanhTra.TEN_NHOM}}
</td>
<ng-container ng-repeat="keHoachThanhTra in nhomThanhTra.ListKeHoachThanhTra ">
<td rowspan="keHoachThanhTra.ListDoiTuong.length">{{keHoachThanhTra.stt}}</td>
<td rowspan="keHoachThanhTra.ListDoiTuong.length">{{keHoachThanhTra.TEN_KEHOACH}}</td>
<ng-container ng-repeat="doiTuongThanhTra in keHoachThanhTra.ListDoiTuong">
<td>{{doiTuongThanhTra.stt}}</td>
<td>{{doiTuongThanhTra.TEN_DOITUONG}}</td>
</ng-container>
</ng-container>
</tbody>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.