Может ли html-таблицы быть решением этой проблемы ng-repeat?

Question

Итак, у меня есть притворный набор данных. Он пытается имитировать эти табличные данные, которые находятся в excel.

function SU(name: String, data: Array<any>) { 
    this.name = name, 
    this.data = data 
}; 

function Month(month: String, year: String, goal: Number, projection: Number, actual: Number) { 
    this.month = month, 
    this.year = year, 
    this.goal = goal, 
    this.projection = projection, 
    this.actual = actual, 
    this.remaining = function() { return this.goal - this.actual } 
}; 

$scope.Recruitment.ServiceUnits = [ 
    new SU("SU101", 
     [ 
      new Month("April", "2014", 1, 2, 0), 
      new Month("May", "2014", 2, 2, 0), 
      new Month("June", "2014", 3, 2, 0), 
      new Month("July", "2014", 4, 2, 0), 
      new Month("August", "2014", 5, 2, 0), 
      new Month("September", "2014", 6, 2, 0), 
      new Month("October", "2014", 7, 2, 0), 
      new Month("November", "2014", 8, 2, 0), 
      new Month("December", "2014", 9, 2, 0), 
      new Month("January", "2015", 10, 2, 0), 
      new Month("February", "2015", 11, 2, 0), 
      new Month("March", "2015", 12, 2, 0), 
      new Month("April", "2015", 13, 2, 0), 
      new Month("May", "2015", 14, 2, 0), 
      new Month("June", "2015", 15, 2, 0), 
      new Month("July", "2015", 16, 2, 0), 
      new Month("August", "2015", 17, 2, 0), 
      new Month("September", "2015", 18, 2, 0) 
     ]), 
    new SU("SU102", 
     [ 
      new Month("April", "2014", 1, 2, 0), 
      new Month("May", "2014", 2, 2, 0), 
      new Month("June", "2014", 3, 2, 0), 
      new Month("July", "2014", 4, 2, 0), 
      new Month("August", "2014", 5, 2, 0), 
      new Month("September", "2014", 6, 2, 0), 
      new Month("October", "2014", 7, 2, 0), 
      new Month("November", "2014", 8, 2, 0), 
      new Month("December", "2014", 9, 2, 0), 
      new Month("January", "2015", 10, 2, 0), 
      new Month("February", "2015", 11, 2, 0), 
      new Month("March", "2015", 12, 2, 0), 
      new Month("April", "2015", 13, 2, 0), 
      new Month("May", "2015", 14, 2, 0), 
      new Month("June", "2015", 15, 2, 0), 
      new Month("July", "2015", 16, 2, 0), 
      new Month("August", "2015", 17, 2, 0), 
      new Month("September", "2015", 18, 2, 0) 
     ]), 
    new SU("SU103", 
     [ 
      new Month("April", "2014", 1, 2, 0), 
      new Month("May", "2014", 2, 2, 0), 
      new Month("June", "2014", 3, 2, 0), 
      new Month("July", "2014", 4, 2, 0), 
      new Month("August", "2014", 5, 2, 0), 
      new Month("September", "2014", 6, 2, 0), 
      new Month("October", "2014", 7, 2, 0), 
      new Month("November", "2014", 8, 2, 0), 
      new Month("December", "2014", 9, 2, 0), 
      new Month("January", "2015", 10, 2, 0), 
      new Month("February", "2015", 11, 2, 0), 
      new Month("March", "2015", 12, 2, 0), 
      new Month("April", "2015", 13, 2, 0), 
      new Month("May", "2015", 14, 2, 0), 
      new Month("June", "2015", 15, 2, 0), 
      new Month("July", "2015", 16, 2, 0), 
      new Month("August", "2015", 17, 2, 0), 
      new Month("September", "2015", 18, 2, 0) 
     ]) 
]; 

Как именно я хотел бы использовать нг-повтора, чтобы отобразить это? Чтобы иметь два слоя заголовков и чередовать цель, проецирование, фактическое & Оставшиеся данные между месяцами.

<div id="goalData"> 
    <table> 
     <thead> 
      <tr> 
       <th colspan="4" ng-repeat="data in Recruitment.ServiceUnits[0].data track by $index">{{data.month | limitTo:3}}</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="su in Recruitment.ServiceUnits track by $index"> 

      </tr> 
     </tbody> 
     <tfoot> 
      <tr></tr> 
     </tfoot> 
    </table> 
</div> 

Я могу получить первый заголовок просто отлично. во второй строке заголовков я не уверен, потому что кажется, что мне нужен вложенный ng-repeat.

Что касается тела, я могу делать каждую строчку просто отлично, но на самом деле получение табличных данных там в правильных местах оказывается проблематичным.

Неверны ли таблицы для этого, хотя это табличные данные? Есть ли способ реструктурировать это, чтобы он работал правильно, или мне нужно просто начать использовать div или создать собственные угловые директивы?

Answer 1

Ну, на основании ссылки, опубликованной CozyAzure, я как бы разработал решение.

Я сохранил данные так же, но изменил способ обращения к html следующим образом.

 <table> 
     <tr> 
      <td> 
       &nbsp; 
       <table> 
        <tr> 
         <th>SU</th> 
        </tr> 
        <tr ng-repeat="su in Recruitment.ServiceUnits track by $index"> 
         <td>{{su.name}}</td> 
        </tr> 
       </table> 
      </td> 
      <td ng-repeat="month in Recruitment.ServiceUnits[0].data track by $index"> 
       {{month.month | limitTo: 3}} 
       <table> 
        <tr> 
         <th>Goal</th> 
         <th>Proj</th> 
         <th>Actl</th> 
         <th>Rmng</th> 
        </tr> 
        <tr ng-repeat="su in Recruitment.ServiceUnits track by $index"> 
         <td>{{month.goal}}</td> 
         <td>{{month.projection}}</td> 
         <td>{{month.actual}}</td> 
         <td>{{month.remaining()}}</td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
    </table> 

Это производит такого рода в результате

Что, конечно, должна быть в стиле.

К сожалению, теперь мне нужно реализовать фиксированные заголовки, чтобы документ мог прокручиваться вниз с фиксированными заголовками. Я думаю, что я достиг предела стола здесь, потому что все, что я прочитал, говорит, что это кошмар для реализации, особенно с моей нынешней структурой.

Дивы могут быть проще решить все. Особенно, когда мне нужно начинать расслоение все больше и больше эффектов.