採用NG-重複創建嵌套表

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格式，你可以嘗試這樣的事情：

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 
 
    } 
 
    }]; 
 
}

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