AngularJS 中的嵌套 ng-repeat答案

【问题标题】：Nested ng-repeat in AngularJSAngularJS 中的嵌套 ng-repeat
【发布时间】：2018-12-23 20:17:57
【问题描述】：

我有以下 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>

请帮帮我！！！

【问题讨论】：

在<tr> 元素中嵌套<tr> 元素是非法的HTML。
那我现在能做什么
请向我们展示您想要的表格外观。由于表格的 HTML 没有意义，因此不清楚您想要的表格是什么样的。

标签： html angularjs html-table

【解决方案1】：

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>

【讨论】：