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 link，其中包含两个版本

Answer 1

我要用你的第二种方法。您正在重复列模式，这不起作用。你应该重复每一行

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

使用ngRepeat进行AngularJS复杂表设计

1 个答案: