AngularJS

Question

我的 HTML 模板有问题。我需要在 table 内乘以代码块，如下所示。如果可能的话使用 ng-repeat。我和 ANGULARJS.

一起工作

下面是我的模板：

<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>

这里是一些模板，我在其中手动添加了代码块，这些代码块给出了我需要的结果（也如下所示）：

<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

使用 ng-repeat 实现最后一行的一种方法可能是

<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>

水平对齐的 table 使用 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>

AngularJS - 如何将 table 中的 HTML 代码块与 ng-repeat 相乘？

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

html

angularjs-ng-repeat