javascript - Angularjs 使用 ng-repeat 和 标签来重复列标题

Question

我正在尝试创建一个包含多行的表格，其中一行包含重复的列标题，如下所示。

我不知道如何使用ng-repeat在angularjs创建这些标题。我尝试输入 ng-repeat在<tr>元素显然无法工作，因为它会创建多行。

我还尝试将其放入 <th>元素，但标题不会交替出现。

我想使用ng-repeat (显示当前和先前的标题)而不是像下面的代码那样手动键入它们，因为重复列出现的次数是动态的(取决于第 1 行)。

<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-repeat start 和 end 指令:

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-start 和 ng-repeat-end 的标签之间的所有内容都将包含在重复中。顺便说一句，ng-if (ng-if-start/ng-if-end) 也存在同样的情况