使用ng-repeat创建嵌套表

Question

第一个片段显示了我想要的输出：

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

Answer 1

如果您能够更改$ scope.tableData格式，可以尝试类似的方法：

＆＃13;

＆＃13;

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.header = [
    [{
      name: 'Name',
      rowspan: 2
    }, {
      name: 'Place',
      rowspan: 2
    }, {
      name: 'Date1',
      colspan: 3
    }, {
      name: 'Date2',
      colspan: 3
    }],
    [{
      name: 'DD'
    }, {
      name: 'MM'
    }, {
      name: 'YYYY'
    }, {
      name: 'DD'
    }, {
      name: 'MM'
    }, {
      name: 'YYYY'
    }]
  ];

  $scope.data = [{
    name: 'Test',
    place: 'US',
    date2: {
      mm: 09,
      yyyy: 2017
    }
  }];
}

＆＃13;

<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 ng-repeat="thRow in header">
      <th ng-repeat="th in thRow" colspan="{{th.colspan}}" rowspan="{{th.rowspan}}" data-ng-bind="th.name"></th>
    </tr>
    <tr data-ng-repeat="d in data">
      <td data-ng-bind="d.name" />
      <td data-ng-bind="d.place" />
      <td data-ng-bind="d.date1.dd" />
      <td data-ng-bind="d.date1.mm" />
      <td data-ng-bind="d.date1.yyyy" />
      <td data-ng-bind="d.date2.dd" />
      <td data-ng-bind="d.date2.mm" />
      <td data-ng-bind="d.date2.yyyy" />
    </tr>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;