如何在 table 中对齐两个单独的 ng-repeats 的元素

Question

我正在用两个单独的 ng-repeat 重复两个数组的元素。第一个数组的元素是与第二个数组中的统计数据相对应的标签。我想将它们显示在相同的 table 中，以便占据第一个数组元素宽度的单元格与第二个数组中的元素对齐。这是我的尝试：

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

但是，这似乎并没有像 table 那样使用对齐的列来格式化它们。这是我的输出：

我删除了也删除了所有类以防 CSS 影响对齐但没有帮助。我猜这与我的多次重复有关？

如何正确对齐这些行？

我还尝试用 <theader> 标签代替第一个 <tbody> 标签。

非常感谢您的宝贵时间。

编辑：尝试 przno 的方法。我需要这些嵌套的重复来获得我想要的内容。不确定如何进行这项工作：

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

编辑 2

这是我在 plunker 中的问题的简化版本：

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

编辑 3

示例中使用的数据如下所示：

$scope.pTab = {
  data: {
    modelHeaders: ["specHeader1", "specHeader2", "specHeader3", "specHeader4"],
    modelData: {
      modelArray: ["spec1", "spec2", "spec3", "spec4"]
    }
  }
};

Answer 1

如果我理解正确你的问题，解决方法很简单：

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

但请注意，您的数组应包含相同数量的项目，否则当然会错位。

Answer 2

如果所讨论的数据对象确实是它的样子，那么您可以迭代内部 modelHeaders 数组以获得 <th> 并迭代 modelData.modelArray - 获得 <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>

但是，如果您在 pTab 或 modelData 下有更多属性 - 或者，在其他情况下，您的模型是嵌套的 - 那么您需要先将其展平以进行视图表示.

Answer 3

看看这个plnkr，我认为它显示了你想要的。

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>

如何在 table 中对齐两个单独的 ng-repeats 的元素

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

html-table

angularjs

angularjs-ng-repeat