Динамически генерировать столбцы в таблице с AngularJS

Question

Я новичок в AngularJS и в настоящее время придерживаюсь того, что указано в заголовке, то есть динамически генерирует столбцы в таблице. Мой случай: из Python (а точнее, Django) я передаю dict и список: список содержит имена столбцов («Неделя X», где X соответствует числу недели), и dict выглядит следующим образом:

data : {
    'Person A': {
        'Week 1' : {
            'Task 1': True,
            'Task 2': False,
        },
        'Week 2' : {
            'Task 1': True,
            'Task 2': True,
        },
    },
    'Person B': {
        'Week 1' : {
            'Task 1': True,
            'Task 2': False,
        },
        'Week 2' : {
            'Task 1': False,
            'Task 2': False,
        },
    },
}

И эта структура меняется по мере изменения количества недель. Я хотел бы, чтобы он генерировался динамически, чтобы он выглядел так:

Первое, что мне пришло в голову, - это создать, скажем, шаблон столбца, а затем повторить его для каждого элемента в списке. Но это место, где я столкнулся с проблемой - я просто не мог этого сделать, и каждый новый столбец был добавлен ниже предыдущего. Мой код выглядел так:

<table>
  <thead>
    <th>Person ID</th>
    <th ng-repeat="week in weeks order by $index">
      <tr>
        <td>{{ week }}</td>
      </tr>
      <tr>
        <td>Task 1</td>
        <td>Task 2</td>
      </tr>
    </th>
  </thead>
  <tbody>
    <tr ng-repeat='person in data'>
      <td>{{ person }}</td>
      <td>{{ Task 1 }}</td>
      <td>{{ Task 2 }}</td>
    </tr>
  </tbody>
</table>

И, кроме того, я хотел бы зациклить задачи, то есть я хотел бы динамически создавать и заполнять столбцы данными за конкретную неделю для конкретного человека, но я не знаю, как - я не могу просто поставить ng-repeat в <td> и я не знаю, с помощью какого HTML-тега я мог бы добиться этого.

Answer 1

angular.module('app', []).controller('ctrl', function($scope) {
  $scope.data = {
    'Person A': { 
      'Week 1': { 'Task 1': true, 'Task 2': false },
      'Week 2': { 'Task 1': true, 'Task 2': true }
    },
    'Person B': {
      'Week 1': { 'Task 1': true, 'Task 2': false },
      'Week 2': { 'Task 1': false, 'Task 2': false }
    }
  };

  $scope.weeks = [];
  for (var personName in $scope.data) {
    var person = $scope.data[personName];
    for (var weekName in person) {
      var week = person[weekName];

      var weekScope = {
        name: weekName,
        tasks: []
      };
      $scope.weeks.push(weekScope);

      for (var taskName in week)        
        weekScope.tasks.push(taskName)      
    }
    break;
  }

})

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

.center{
  text-align:center;
}

<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>
        <td rowspan='2'>Person ID</td>
        <td ng-repeat='week in weeks' class='center' colspan='{{week.tasks.length}}'>
          {{week.name}}
        </td>
      </tr>
      <tr>
        <td ng-repeat-start='week in weeks' hidden></td>
        <td ng-repeat-end ng-repeat='task in week.tasks'>{{task}}</td>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat='(personName, person) in data'>
        <td>{{personName}}</td>
        <td ng-repeat-start='week in weeks' hidden></td>
        <td ng-repeat-end ng-repeat='task in week.tasks'>
          {{person[week.name][task]}}
        </td>
      </tr>
    </tbody>
  </table>
</div>