Angular JS：具有动态标题数量的表

I tried to create a table with a dynamic number of titles and sub titles. It should look like this:

我试图创建一个具有动态数量的标题和子标题的表。它应该如下所示：

Each title has 3 sub titles. But I can not know in advance how much headline I will have.

每个标题有3个子标题。但我事先无法知道我会有多少标题。

So in HTML it looks like:

所以在HTML中它看起来像：

  <table class="table table-hover col-xs-12">
    <thead>
      <tr>
        <th rowspan="2">Type ID</th>
        <th colspan="3" ng-repeat="val in ctrl.vals">
          <div class="val">
            <span title="{{val}}">{{val}}</span> <!-- this is title -->
          </div>
         </th>
      </tr>
      <tr>
        <th class="row-header" ng-repeat="val in ctrl.getNumberColumn() track by $index">{{ $index%3 == 0 ? "subtitle1" : $index%3 == 1 ? "subtitle2" : "subtitle3" }}</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="key in ctrl.keys">
        <td class="row-key">{{key}}</td>
        <td class="row-value" ng-repeat="val in ctrl.getNumberColumn() track by $index">
            <div class="list-group" ng-init="data = ctrl.getDataByIndex($index, ctrl.items[key])">
              <a class="list-group-item" ng-if="$index%3 == 0">{{data.avg_fps}} </a>
              <a class="list-group-item" ng-if="$index%3 == 1">{{data.avg_cpu}} </a>
              <a class="list-group-item" ng-if="$index%3 == 2">{{data.session}} </a>
            </div>
        </td>
      </tr>
    </tbody>
  </table>

I understand that it looks confusing - so I would like to ask - is there an option for more simply constructing such a table?

我明白它看起来很混乱 - 所以我想问一下 - 有没有更简单地构建这样一个表的选项？

1 个解决方案

#1

angular.module('app', []).controller('ctrl', function($scope) {
  $scope.titles = [{
    title: 'One',
    items: ['Sub1_1', 'Sub1_2']
  }, {
    title: 'Two',
    items: ['Sub2_1']
  },{
    title: 'Three',
    items: []
  },
  {
    title: 'Four',
    items: ['Sub4_1', 'Sub4_2', 'Sub4_3']
  }];
})

table {
  border-collapse: collapse;
}
table,
td,
th {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>

<div ng-app='app' ng-controller='ctrl'>
  <table>
    <thead>
      <tr>
        <th rowspan="2">TypeId</th>
        <th ng-repeat='item in titles' colspan='{{item.items.length}}' rowspan='{{item.items.length > 0 ? 1 : 2}}'>
          {{item.title}}
        </th>
      </tr>
      <tr>
        <th ng-repeat-start='item in titles' ng-if='false'></th>
        <th ng-repeat-end ng-repeat='sub in item.items'>{{sub}}</th>
      </tr>
    </thead>
  </table>
</div>