帶有ngRepeat的AngularJS復雜表設計

Question

我正在嘗試使用HTML5獲取類似於下圖中的表格。

實際上，該表描述了多維矩陣。 有A級和B級（黃色）。 對於每種模式，都有三種模式，以藍色突出顯示。 對於類的每種模式，我都有不同的參數值，以綠色突出顯示。 灰色單元格將報告所有組合的值。

模式和參數的大小不是先驗的（但是對於A類和B類來說是相同的），因此我想使用ng-repeat自動填充表格的垂直和水平標題，適當地使用colspan和rowspan 。

我面臨的問題是我無法成功編寫A類頭，並且在嘗試在模式和參數中使用rowspan遇到問題。

我最初嘗試使用嵌套表，但問題是灰色區域中的單元格與標題不對齊。 盡管如此，這是我使用的代碼：

<table class=" table-bordered">
  <tbody>
    <tr>
      <td></td>
      <td>
        <table class=" table-bordered">
          <tbody>
            <tr>
              <td colspan="{{getTotalNumCombinations()}}">class B</td>
            </tr>
            <tr>
              <td colspan="{{params.length}}" ng-repeat="m in modes track by $index">{{m}}</td>
            </tr>
            <tr>
              <td ng-repeat="i in getCombinationsArray() track by $index">{{params[getModule($index)]}}</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <table class=" table-bordered">
          <tbody>
            <tr>
              <td>class A</td>
              <td>
                <table class=" table-bordered">
                  <tbody>
                    <tr ng-repeat="m in modes track by $index">
                      <td>{{m}}</td>
                      <td>
                        <table class="table-bordered">
                          <tbody>
                            <tr ng-repeat="p in params track by $index">
                              <td>{{p}}</td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
      <td>
        <table class=" table-bordered">
          <tbody>
            <tr ng-repeat="i in getCombinationsArray() track by $index">
              <td ng-repeat="j in getCombinationsArray() track by $index">({{i}},{{j}})</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

在JS文件中，我有

$scope.params = ['par1', 'par2', 'par3', 'par4', 'par5'];
$scope.modes = ['mode1', 'mode2', 'mode3'];
$scope.getNumCombinations = function() {
  return $scope.params.length * $scope.modes.length;
};

$scope.getCombinationsArray = function() {
  var combinations = [];
  for (var i = 0; i < $scope.getNumCombinations(); i++) {
    combinations.push(i)
  }
  return combinations;
};

$scope.getModule = function(index){
  return index % $scope.params.length;
};

（我知道getCombinationsArray（）非常丑陋，但不知道如何優雅地解決它）

無論如何，由於上述解決方案效果很好，因為灰色單元格無法與標題對齊，因此我嘗試了另一種不使用嵌套表的方法：

<table class=" table-bordered">
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td colspan="{{getNumCombinations()}}">class B</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td colspan="{{params.length}}" ng-repeat="m in modes track by $index">{{m}}</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td ng-repeat="i in getCombinationsArray() track by $index">{{params[getModule($index)]}}</td>
    </tr>
    <tr>
      <td rowspan="{{getNumCombinations()}}">class A </td>
      <td ng-repeat="m in modes">{{m}}</td>
    </tr>
  </tbody>
</table>

如您所見，它不起作用，不幸的是，這是我卡住的地方。

因此，我想知道是否還有我沒有考慮的另一種方法。

編輯：這是與兩個版本的Plunker鏈接

Answer 1

我要用第二種方法。 您正在對模式重復ng，這是行不通的。 您應該對每一行進行ng-repeat

<tr>
    <td class="classColor" rowspan="{{getNumCombinations()}}">class A </td>
    <td class="modeColor" ng-repeat="m in modes">{{m}}</td>
</tr>

這應該更改為（偽代碼）

<tr ng-repeat="par in parsInClassA">
    <td ng-show="onlyFirstTime" rowspan="pars.length">
        Class A
    </td>
    <td ng-show="onlyForFirstParInMode" rowspan="lengthOfParsInThisMode()">
        {{ par.mode }}
    </td>
    <td>
        {{ par }}
    </td>
    <td ng-repeat="par2 in parsInClassB">
        {{ matrixValue(par,par2) }}
    </td>
</tr>