Dynamically generate columns in the table with AngularJS

Question

I'm new to the AngularJS and currently stuck at what's stated in the title, that is dynamically generating columns in the table. My case is: from Python (and to be more specific, Django), I'm passing dict and list: list contains column names ('Week X', where X coresponds to week number) and dict looks like this:

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

And this structure is changing as number of weeks is changing. I would like to have it dynamically generated so it would look like this:

First thing that came to my mind was to create, let's say, column template and then repeat it for every element in the list. But that's the place where I encountered the problem - I just couldn't do so and each new column was added below previous one. My code looked like this:

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

And additionaly, I would like to loop over tasks, meaning I would like to dynamically create and fill columns with data per specific week for specific person, but I don't know how to - I can't just put ng-repeat in <td> and I don't know with which html tag I could achieve this.

Slava Utesinov · Accepted Answer · 2018-11-02 11:24:39Z

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>

Collectives™ on Stack Overflow

Dynamically generate columns in the table with AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related