ng-repeatを使用するAngularjsと繰り返し列ヘッダーのタグ<th>

Question

複数の行と、以下のような繰り返しの列ヘッダーを含む行の1つを含む表を作成しようとしています。

ng-repeatをangularjsにどのように使用してこれらのヘッダーを作成するのかよくわかりません。私はng-repeatを<tr>要素に入れてみましたが、これは明らかに倍数の行を作成するので動作しません。

また、<th>という要素に入れてみましたが、ヘッダーは代わりに表示されません。

繰り返し列が表示される回数が動的（行1に依存する）なので、以下のコードのように手作業で入力するのではなく、ng-repeat（現在のヘッダーと先行のヘッダーを表示する）を使用します。あなたが提供する画像を探してい

<thead> 
    <tr> 
     <th id="item" scope="colgroup" style="text-align:center" rowspan="2">Items</th> 
     <th ng-repeat="year in years()" id={{year}} scope="colgroup" style="text-align:center" colspan="2"> 
      {{ year }} 
     </th> 
    </tr> 
    <tr> 
      <th id="{{year}}planning" scope="col" class="tsub-head">Current</th> 
      <th id="{{year}}reporting" scope="col" class="tsub-head">Prior</th> 
      <th id="{{year}}planning" scope="col" class="tsub-head">Current</th> 
      <th id="{{year}}reporting" scope="col" class="tsub-head">Prior</th> 
    </tr> 
</thead> 

Answer 1

、解決策はNGリピートディレクティブで<div>と「現在」と「前」<th>を包むことにあります。

<thead> 
    <tr> 
     <th id="item" scope="colgroup" style="text-align:center" rowspan="2">Items</th> 
     <th ng-repeat="year in years()" id={{year}} scope="colgroup" style="text-align:center" colspan="2"> 
      {{year}} 
     </th> 
    </tr> 
    <tr> 
     <div ng-repeat="year in years()"> 
      <th id="{{year}}planning" scope="col" class="tsub-head">Current</th> 
      <th id="{{year}}reporting" scope="col" class="tsub-head">Prior</th> 
     </div> 
    </tr> 
</thead> 

Answer 2

状況のこの種のngのリピート開始と終了の指示があります：このような

NGリピートスタートを含むタグの間でEverithing

angular.module("Test", []).controller("repetition", 
 
    function($scope) 
 
    { 
 
     $scope.years = function() 
 
     { 
 
     return [2017, 2018]; 
 
     } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<table ng-app="Test" ng-controller="repetition"> 
 
<thead> 
 
    <tr> 
 
     <th id="item" scope="colgroup" style="text-align:center" rowspan="2">Items</th> 
 
     <th ng-repeat="year in years()" id={{year}} scope="colgroup" style="text-align:center" colspan="2"> 
 
      {{year}} 
 
     </th> 
 
    </tr> 
 
    <tr> 
 
     <th ng-repeat-start="year in years()" id="{{year}}planning" style="background-color:#EEEEEE" scope="col" class="tsub-head">Current</th> 
 
     <th ng-repeat-end id="{{year}}reporting" scope="col" class="tsub-head">Prior</th> 
 
    </tr> 
 
</thead> 
 

 
<tbody></tbody> 
 

 
</table>

とng-repeat-endは繰り返しに含まれます。 ng-if（ng-if-start/ng-if-end）の場合も同様です。