AngularJS komplexes Tischdesign mit ngRepeat

Question

Ich versuche mit HTML5 eine Tabelle wie die im Bild unten zu erhalten.

In der Praxis beschreibt die Tabelle eine mehrdimensionale Matrix. Es gibt Klasse A und Klasse B (in gelb). Für jeden von diesen gibt es drei Modi, die blau hervorgehoben sind. Für jeden der Modi der Klassen habe ich unterschiedliche Werte für die Parameter, grün hervorgehoben. Die grauen Zellen würden die Werte für alle Kombinationen anzeigen.

Die Größe der Modi und Parameter sind nicht prior bekannt (aber sind für Klasse A und Klasse B identisch), also würde ich gerne mit ng-repeat die vertikalen und horizontalen Header der Tabelle automatisch füllen, opportunely unter Verwendung colspan und rowspan.

Das Problem, mit dem ich konfrontiert bin, ist, dass ich die Klasse A Header nicht erfolgreich schreiben kann und ich stecken bleiben versuchen rowspan in den Modi und den Parametern zu verwenden.

Ich versuchte zunächst, verschachtelte Tabellen zu verwenden, aber das Problem ist, dass dann die Zellen im grauen Bereich nicht mit den Headern ausgerichtet sind. Dennoch, hier ist der Code, den ich verwenden:

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

In der JS-Datei Ich habe

$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; 
}; 

(ich kenne die getCombinationsArray() sehr hässlich ist, aber nicht wissen, wie es elegant zu lösen)

wie dem auch sei, da die Lösung oben auch die grauen Zellen funktioniert ausrichten nicht gut auf den Header, habe ich versucht, einen anderen Ansatz, der nicht verschachtelten Tabellen nicht verwendet:

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

Wie Sie sehen können, funktioniert es nicht und das ist, wo ich leider stecken geblieben bin.

Ich frage mich daher, ob es einen anderen Ansatz gibt, den ich nicht in Betracht ziehe.

EDIT: Hier ist die Plunker link mit den beiden Versionen

Answer 1

ich mit dem zweiten Verfahren gehe. Sie sind ng-Wiederholung über Spalte für Modi, das kann nicht funktionieren. Sie sollten jede Zeile über

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

Dies sollte (Pseudo-Code) ändern

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