AngularJS - How to multiply block of HTML code iside the table with ng-repeat?

Question

I have problem in my HTML template. I need to multiply block of code inside a table, like showed below. If possible with using ng-repeat. I work with ANGULARJS.

Below is my template:

<div class="ngdialog-message" style="height: 100%; padding: 1em 0em;">
    <div style="overflow: auto; height: 100%;">
        <div class="container-fluid" style="padding: 0 2em;">
            <div class="row">
                <h2>COMPARISON OF PARTS</h2>
                    <table class="table table-hover  table-bordered table-compare" style="border-collapse: separate; border: 2px solid #e2e2e2; border-radius: 8px; -moz-border-radius: 8px">
                        <tr>
                            <th>Part Number:</th>
                            <td colspan="3" ng-repeat="part in selectedParts.loadedParts">
                                <strong>{{part.part_number}}</strong>
                            </td>
                        </tr>
                        <tr>
                            <th>Status:</th>
                            <td colspan="3" ng-repeat="part in selectedParts.loadedParts">
                                {{part.IsPreferredPart}}
                            </td>
                        </tr>
                        <tr>
                            <th>Description:</th>
                            <td colspan="3" ng-repeat="part in selectedParts.loadedParts">
                                {{part.Description}}
                            </td>
                        </tr>
                        <tr>
                            <th>Part type:</th>
                            <td colspan="3" ng-repeat="part in selectedParts.loadedParts">
                                {{part.PrimaryPartType}}
                            </td>
                        </tr>
                        <tr>
                            <th rowspan="3">Components:</th>

                            <td>Component No </td>
                            <td>Diameter Min</td>
                            <td>Diameter Max</td>
                        </tr>
                        <tr>
                            <td>{{part.components[0].part_number}}</td>
                            <td>{{part.components[0].diameterMin}}</td>
                            <td>{{part.components[0].diameterMax}}</td>
                        </tr>
                        <tr>
                            <td>{{part.components[1].part_number}}</td>
                            <td>{{part.components[1].diameterMin}}</td>
                            <td>{{part.components[1].diameterMax}}</td>
                        </tr>
                    </table>
            </div>
        </div>
    </div>
</div>

And here is the some template where I have manually added blocks of code which gave me needed result(also shown below):

<div class="ngdialog-message" style="height: 100%; padding: 1em 0em;">
    <div style="overflow: auto; height: 100%;">
        <div class="container-fluid" style="padding: 0 2em;">
            <div class="row">
                <h2>COMPARISON OF PARTS</h2>
                    <table class="table table-hover  table-bordered table-compare" style="border-collapse: separate; border: 2px solid #e2e2e2; border-radius: 8px; -moz-border-radius: 8px">
                        <tr>
                            <th>Part Number:</th>
                            <td colspan="3" ng-repeat="part in selectedParts.loadedParts">
                                <strong>{{part.part_number}}</strong>
                            </td>
                        </tr>
                        <tr>
                            <th>Status:</th>
                            <td colspan="3" ng-repeat="part in selectedParts.loadedParts">
                                {{part.IsPreferredPart}}
                            </td>
                        </tr>
                        <tr>
                            <th>Description:</th>
                            <td colspan="3" ng-repeat="part in selectedParts.loadedParts">
                                {{part.Description}}
                            </td>
                        </tr>
                        <tr>
                            <th>Part type:</th>
                            <td colspan="3" ng-repeat="part in selectedParts.loadedParts">
                                {{part.PrimaryPartType}}
                            </td>
                        </tr>
                        <tr>
                            <th rowspan="3">Components:</th>

                            <td>Component No </td>
                            <td>Diameter Min</td>
                            <td>Diameter Max</td>

                            <td>Component No </td>
                            <td>Diameter Min</td>
                            <td>Diameter Max</td>

                            <td>Component No </td>
                            <td>Diameter Min</td>
                            <td>Diameter Max</td>
                        </tr>
                        <tr>
                            <td>A_XXX_XX1</td>
                            <td>10</td>
                            <td>20</td>

                            <td>A_XXX_XX2</td>
                            <td>10</td>
                            <td>20</td>

                            <td>A_XXX_XX3</td>
                            <td>10</td>
                            <td>20</td>
                        </tr>
                        <tr>
                            <td>B_XXX_XX1</td>
                            <td>1.0</td>
                            <td>2.0</td>

                            <td>B_XXX_XX2</td>
                            <td>1.0</td>
                            <td>2.0</td>

                            <td>B_XXX_XX3</td>
                            <td>1.0</td>
                            <td>2.0</td>
                        </tr>
                    </table>
            </div>
        </div>
    </div>
</div>

Answer 1

One way to implement the last row using ng-repeat could be

<tr>
  <th>Components:</th>
  <td ng-repeat="part in selectedParts.loadedParts">
    <table class="table table-bordered"> 
      <tr>
        <th>Component No</th>
        <th>Diameter Min</th>
        <th>Diameter Max</th>
      </tr>
      <tr ng-repeat="component in part.components">
        <td>{{component.part_number}}</td>
        <td>{{component.diameterMin}}</td>
        <td>{{component.diameterMax}}</td>
      </tr>
    </table>
  </td>
</tr>

A horizontally aligned table would be easier to implement using ng-repeat

<table table table-hover  table-bordered table-compare" style="border-collapse: separate; border: 2px solid #e2e2e2; border-radius: 8px; -moz-border-radius: 8px">
  <thead>
    <tr>
      <th>Part Number:</th>
      <th>Status:</th>
      <th>Description:</th>
      <th>Part type:</th>
      <th colspan="2*selectedParts.loadedParts.length">Components:</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="part in selectedParts.loadedParts">
      <td><strong>{{part.part_number}}</strong></td>
      <td>{{part.IsPreferredPart}}</td>
      <td>{{part.Description}}</td>
      <td>{{part.PrimaryPartType}}</td>
      <td ng-repeat="component in part.components">
        <table class="table table-condensed" style="border-collapse: collapse ">
          <tr>
            <th>Component No</th>
            <td>{{component.part_number}}</td>
          </tr>
          <tr>
            <th>Diameter Min</th>
            <td>{{component.diameterMin}}</td>
          </tr>
          <tr>
            <th>Diameter Max</th>
            <td>{{component.diameterMax}}</td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>