Динамический заголовок таблицы с подзаголовками

Question

Как создать (с угловым) динамический заголовок таблицы, где ячейки заголовка должны иметь некоторые ячейки подзаголовка, не равные ячейкам заголовка?

Моя таблица:

var table = [{ 
header: "a", 
subheaders: "a1", "a2" 
}, { 
header: "b", 
subheaders: "b1", "b2", "b3" 
}] 

Я пытаюсь создать такой заголовок таблицы (данные таблицы будут иметь отдельный контроллер):

|a |b  | 
|a1|a2|b1|b2|b3| 

Я использую нг-повтор и все нормально с заголовками (когда я делаю <tr ng-repeat="head in table"><th>{{head.header}}</th></tr>), но когда я пытаюсь сделать то же самое с подзаголовками, ng-repeat повторяет весь массив подзаголовков, и мне не хватает какого-то псевдоэлемента таблицы или smth ...

И я получаю

|a |b  | 
|a1a2|b1b2b3| 

вот мой код: http://plnkr.co/edit/pSwjxi2vMN61tevArW4F?p=preview

Answer 1

Пожалуйста, смотрите ниже:

(function() { 
 

 
    var table = { 
 
    thead: [{ 
 
     header: "A", 
 
     subheaders: [ 
 
     "A1", 
 
     "A2" 
 
     ] 
 
    }, { 
 
     header: "B", 
 
     subheaders: [ 
 
     "B1", 
 
     "B2", 
 
     "B3" 
 
     ] 
 
    }, { 
 
     header: "C", 
 
     subheaders: [ 
 
     "C1", 
 
     "C2", 
 
     "C3" 
 
     ] 
 
    }] 
 
    }; 
 

 
    var app = angular.module("app", []); 
 
    app.controller("Controller", function() { 
 

 
    var vm = this; 
 
    vm.table = table; 
 
    vm.subArray = []; 
 
    vm.subs = function(table) { 
 

 
     angular.forEach(vm.table.thead, function(header) { 
 

 
     angular.forEach(header.subheaders, function(subheader) { 
 

 
      vm.subArray.push(subheader) 
 

 

 
     }) 
 

 

 
     }) 
 

 

 
    }; 
 

 
    vm.subs(); 
 
    }); 
 
})()

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
 
<div ng-app="app"> 
 
    <div ng-controller="Controller as ctrl"> 
 

 
    <h1>Some table</h1> 
 

 
    <table class="table table-bordered"> 
 
     <thead> 
 
     <tr> 
 
      <th ng-repeat="head in ctrl.table.thead" colspan="{{head.subheaders.length}}">{{head.header}}</th> 
 
     </tr> 
 

 

 

 

 
     <tr> 
 
      <th ng-repeat="sub in ctrl.subArray">{{sub}}</th> 
 
     </tr> 
 

 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td ng-repeat="i in [1, 2, 3, 4, 5, 6, 7, 8]">{{i}}</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</div>