How to align elements of two seperate ng-repeats in a table

Question

I have am repeating the elements of two arrays with two separate

ng-repeat

s. The elements of the first array are labels that correspond to a stat from the second array. I would like to display them in the same table so that the cells take up the widths of the elements from the first array are aligned with those from the second. Here is my attempt:

<table>         

        <tbody ng-repeat="data in pTab track by $index" class="headerWrapper" ng-if="modelIsActive2( data, $index)">

            <tr class="specHeaders" ng-repeat="headers in data.modelHeaders" ng-if="!$last">

                <td class="specs2">{{headers}}</td>

            </tr>                                                               

        </tbody>



        <tbody ng-repeat="data in pTab track by $index" class="specsWrapper" ng-if="modelIsActive2(data, $index)">      

            <tr class="specsWrapper" ng-repeat="modelArrays in data.modelData" ng-if="modelIsActive(modelArrays, $index)">

                <td class="specNumbers" ng-repeat="mod in modelArrays track by $index" ng-if="!$last">

                    <p class="specValues2">{{mod}}</p>

                </td>

            </tr>                                                                   

        </tbody>

</table>

However, this doesn't appear to format them like a table with aligned columns. Here is my output:

screenshot of output

I removed also removed all classes in case the CSS was affecting the alignment but that didn't help. I'm guessing it's something to do with my multiple repeats?

How can I align these rows properly?

I also tried with a

<theader>

tag in place of the first

<tbody>

tag.

Thank you very much for your time.

EDIT:
Trying przno's method. I need these nested repeats to get to the content I want. Not sure how to make this work:

<table>

        <tr>

            <div ng-repeat="data in pTab track by $index" class="headerWrapper" ng-if="modelIsActive2( data, $index)">

                <div class="specHeaders" ng-repeat="headers in data.modelHeaders" ng-if="!$last">

                    <th class="specs2">{{headers}}</th>

                </div>                                                              

            </div>

        </tr>

        <tr>

            <div ng-repeat="data in pTab track by $index" class="specsWrapper" ng-if="modelIsActive2(data, $index)">        

                <div class="specsWrapper" ng-repeat="modelArrays in data.modelData" ng-if="modelIsActive(modelArrays, $index)">

                    <div class="specNumbers" ng-repeat="mod in modelArrays track by $index" ng-if="!$last">

                        <td class="specValues2">{{mod}}</td>

                    </div>

                </div>                                                                  

            </div>

        </tr>

</table>

EDIT 2

Here is a simplified version of my issue in a plunker:

http://plnkr.co/edit/LpvuIjEKvJ2MLzPfFrfo?p=preview

EDIT 3

Here's how the data used in the example looks like:

$scope.pTab = {

  data: {

    modelHeaders: ["specHeader1", "specHeader2", "specHeader3", "specHeader4"],

    modelData: {

      modelArray: ["spec1", "spec2", "spec3", "spec4"]

    }

  }

};

Answer 1

Take a look at this plnkr, I think it's showing what you want.

http://plnkr.co/edit/h9z5airokWFV5oxWt73z?p=preview

html:

   <div ng-repeat="data in pTab">

      <table>

        <thead>
          <tr>
            <th ng-repeat="headers in data.modelHeaders">{{headers}}</th>
          </tr>
        </thead>

        <tbody>
          <tr ng-repeat="modelArrays in data.modelData">
            <td ng-repeat="specs in modelArrays">{{specs}}</td>
          </tr>
        </tbody>

      </table>

    </div>

How to align elements of two seperate ng-repeats in a table

Sign up