使用 ngRepeat 的 AngularJS 复杂表设计答案

【问题标题】：AngularJS complex table design with ngRepeat使用 ngRepeat 的 AngularJS 复杂表设计
【发布时间】：2016-11-16 11:54:21
【问题描述】：

我正在尝试使用 HTML5 获取如下图所示的表格。

在实践中，该表描述了一个多维矩阵。有 A 类和 B 类（黄色）。对于其中的每一个，都有三种模式，以蓝色突出显示。对于类的每一种模式，我都有不同的参数值，以绿色突出显示。灰色单元格会报告所有组合的值。

modes和参数的大小事先不知道（但是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 的两个版本

【问题讨论】：

如果您对每个灰色单元格行重复您的最后一个 tr 并有条件地显示 td 是否处于“新”类/模式中，那会起作用吗？
嗨@Noppey，我不确定我是否理解你的建议。我添加了一个 Plunker 链接，因为它可能有助于更好地查看代码。你能用代码解释一下吗？

标签： javascript html css angularjs html-table

【解决方案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>

【讨论】：