Question

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

我不确定如何在ng-repeat中使用angularjs来创建这些标头。我尝试将ng-repeat放在<tr>元素中，这显然不会有效，因为它会创建多个行。

我也尝试将其放在<th>元素中，但标题不会出现。

我想使用ng-repeat（显示Current和Prior标头）而不是像下面的代码那样手动输入它们，因为重复列出现的次数是动态的（取决于第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开始和结束指令：

＆＃13;

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

＆＃13;

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

＆＃13;

包含ng-repeat-start和ng-repeat-end的标签之间的重合将包含在重复中。顺便提一下ng-if（ng-if-start / ng-if-end）

Answer 2

寻找您提供的图片，解决方案在于使用带有ng-repeat指令的<th>包装“current”和“previous”<div>。像这样：

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

Angularjs使用ng-repeat和标记重复列标题

2 个答案: