Angularjs使用ng重複與<th>標記爲重複列標題

我試圖創建一個表與多個行和其中包含像下面的重複列標題的行之一。Angularjs使用ng重複與<th>標記爲重複列標題

我不確定如何使用ng-repeat在angularjs來創建這些標頭。我試着把ng-repeat放在<tr>這個元素中，因爲它創建了多個行，所以顯然不起作用。

我也試過把它放在<th>元素中，但是標題不會出現。因爲重複列出現的次數是動態的（取決於行1），所以我想使用ng-repeat（顯示Current和Prior標題），而不是像下面的代碼那樣手動鍵入它們。

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

來源

2016-10-20 Mona

代碼格式和語法 – Fraser

尋找你所提供的情況，解決的辦法是包裹「當前」和「先」 <th>與NG-重複指令中<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>

來源

2016-10-20 16:33:38 belyid

我確實嘗試過。出於某種原因，標題只出現一次而不是2次。我不確定將div標籤放在tr中是否正確。 – Mona

當我嘗試這個

\t \t \t \t \t \t {{year}} Current \t \t \t \t \t \t Prior \t \t \t \t \t

。 {{year}}爲空 – Mona

這是ng-repeat =「year（in years）（）而不是planYears（）」的修正，正如我所說的{{year}}有趣地沒有任何內容。 – Mona

有NG-重複的開始和結束指令對於這種情況：

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>

Everithing含有NG-重複啓動標籤之間ng-repeat-end將包含在重複中。順便說一句，存在ng-if（ng-if-start/ng-if-end）

來源

2017-04-12 08:33:03 Dmitry

Angularjs使用ng重複與<th>標記爲重複列標題

回答

相關問題