How to create table headers in a dynamically sized table using Angularjs

Question

I want to create a dynamic height & width table, but I'm having trouble with the table header.

The <td> elements display just fine with this ng-repeater

<tr ng-repeat="set in currFormData.volume track by $index">
  <td ng-repeat="repSpace in set track by $index">
    {{repSpace}}
  </td>
</tr>

but I want a <th> row containing 1, 2, 3, 4... and it must adjust as the table adjusts. I'm looking for something like this which looks through only the second level of my model 1 time:

<tr>
  <th ng-repeat="repSpace in set in currFormData.volume track by $index">{{$index + 1}}</th>
</tr>

Here is my $scope model:

$scope.currFormData = {"date" : "", "volume": [
    [[1,135],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],
    [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],
    [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],
    [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]]
] };

How can I make this work? I'm open to changing my model.

Simon K · Accepted Answer · 2016-02-23 21:39:55Z

1

Assuming that every 'set' in your 'volume' will be of equal length:

HTML:

<th ng-repeat="i in getArray(currFormData.volume[0].length) track by $index">{{$index + 1}}</th>

Controller:

$scope.getArray = function (length) {
    return new Array(length);
}

Otherwise:

HTML:

<th ng-repeat="i in getLongestArray(currFormData.volume) track by $index">{{$index + 1}}</th>

Controller:

$scope.getLongestArray = function (arrayOfArrays) {
    var longest: number = 0;
    for (var i: number = 0; i < arrayOfArrays.length; i++) {
        if (arrayOfArrays[i].length > longest) {
            longest = arrayOfArrays[i].length;
        }
    }
    return (new Array(longest));
}

answered Feb 23, 2016 at 21:39

Simon K

2,8771 gold badge15 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to create table headers in a dynamically sized table using 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