Create a table with colspan and a dynamic amount of columns

Question

I'm new to angular and would like to create a table with an unknown amount of columns. Additionally the table contains a second row of header columns, also with a different and unknown amount of columns. I have to use colspan in the second line, but don't know how. What would be a good way, maybe to create a directive? Or is there a simpler solution?

For a better understanding I created: http://jsfiddle.net/uyLrjgyz/2/.

I get all the data in JSON format like:

{
  "header": {
    "columns": [
      {
        "name": "0ColHeader",
        "subcolumns": [
          {
            "name": ""
          }
        ]
      },
      {
        "name": "1ColHeader",
        "subcolumns": [
          {
            "name": "1Col1SubColHeader"
          },
          {
            "name": "1Col2SubColHeader"
          },
          {
            "name": "1Col3SubColHeader"
          }
        ]
      },
      {
        "name": "2ColHeader",
        "subcolumns": [
          {
            "name": "2Col1SubColHeader"
          }
        ]
      },
      {
        "name": "3ColHeader",
        "subcolumns": [
          {
            "name": "3Col1SubColHeader"
          },
          {
            "name": "3Col2SubColHeader"
          }
        ]
      }
    ]
  },
  "rows": {
    "data": [
      [
        {
          "value": "text"
        },
        {
          "value": "0"
        },
        {
          "value": "0"
        },
        {
          "value": "1"
        },
        {
          "value": "0"
        },
        {
          "value": "1"
        },
        {
          "value": "0"
        }
      ],
      [
        {
          "value": "more text"
        },
        {
          "value": "1"
        },
        {
          "value": "0"
        },
        {
          "value": "1"
        },
        {
          "value": "1"
        },
        {
          "value": "0"
        },
        {
          "value": "1"
        }
      ]
    ]
  }
}

I can modify the json, as long as I don't have to convert it to much at the backend. This angularjs and template table is related to my problem, but it's a little bit skimped.

Answer 1

You're there almost. Here is the Working fiddle

For colspan its simple like this colspan="{{col.subcolumns.length}}"

But for next sub-headers we should write handler like below in controller after $scope.table

$scope.subHeaders = function () {
    var subs = [];
    $scope.table.header.columns.forEach(function (col) {
        col.subcolumns.forEach(function (sub) {
            subs.push(sub);
        });
    });
    return subs;
};

Markup for second row:

<tr>
    <th ng-repeat="col in subHeaders()">{{col.name}}</th>
</tr>

Full Table:

<div ng-app="tableApp" ng-controller="tableController">
    <table>
        <tr>
            <th colspan="{{col.subcolumns.length}}" ng-repeat="col in table.header.columns">{{col.name}}</th>
        </tr>
        <tr>
            <th ng-repeat="col in subHeaders()">{{col.name}}</th>
        </tr>
        <tr ng-repeat="row in table.rows.data">
            <td ng-repeat="cell in row">{{cell.value}}</td>
        </tr>
    </table>
</div>