CODEWITHSUNDEEP
angularjsangularjs-ng-repeathtml-table
user95227
user95227

Reputation: 1953

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

I have am repeating the elements of two arrays with two separate ng-repeats. 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"]
    }
  }
};

Upvotes: 0

Views: 2226

Answers (3)

New Dev
New Dev

Reputation: 49590

If the data object in question is exactly how it looks like, then you could just iterate over the inner modelHeaders array for <th> and iterate over modelData.modelArray - for <td>:

<table>
  <tr>
    <th ng-repeat="header in pTab.data.modelHeaders">{{header}}</th>
  </tr>
  <tr ng-repeat="data in pTab.data.modelData>
    <td ng-repeat="spec in data.modelArray">{{spec}}</td>
  </tr>
</table>

If, however, you have more properties under pTab, or under modelData - or, in others, your model is nested - then you'd need to flatten it first for View representation.

Upvotes: 1

Nicholas Hirras
Nicholas Hirras

Reputation: 2596

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>

Upvotes: 2

przno
przno

Reputation: 3504

If I understood correctly your question, the solution is simple:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<!-- declaring arrays here for demo purpose -->
<table ng-app ng-init="array1 = ['some', 'headers', 'for', 'table']; array2 = ['here', 'are', 'some', 'data'];" border="1">
  <tr>
    <th ng-repeat="header in array1">{{header}}</th>
  </tr>
  <tr>
    <td ng-repeat="data in array2">{{data}}</td>
  </tr>
</table>

But be aware that your arrays should contain same number of items, if not it will be of course mis-aligned.

Upvotes: 0

Related Questions