Question

我想知道如何在表格中正确显示两个数组的重复元素。我认为我的问题可能来自嵌套ng-repeat的元素。以下是我在plunker中创建的问题的简化版本：

         <table>
            <tr>
                <div ng-repeat="data in pTab">
                    <div ng-repeat="headers in data.modelHeaders">
                        <th>{{headers}}</th>
                    </div>                                                              
                </div>
            </tr>
            <tr>
                <div ng-repeat="data in pTab">        
                    <div ng-repeat="modelArrays in data.modelData">
                        <div ng-repeat="specs in modelArrays">
                            <td>{{specs}}</td>
                        </div>
                    </div>                                                                  
                </div>
            </tr>
        </table>

我可以看到这里的元素，我试图将它们放在一个表格中，以便我可以将标题对齐到相应的规格之上。

<div ng-repeat="data in pTab">
        <div ng-repeat="headers in data.modelHeaders">
            <h3>{{headers}}</h3>
        </div>                                                              
    </div>

    <div ng-repeat="data in pTab">      
        <div ng-repeat="modelArrays in data.modelData">
            <div ng-repeat="specs in modelArrays">
                <p>{{specs}}</p>
            </div>
        </div>                                                                  
    </div>

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

我这样做是为了让我能够正确地将标题和规格显示为表格。当我需要多个ng-repeat div时，如何在同一个表格中显示这些元素？

如果您需要更多信息或其他任何信息，请与我联系。

修改

pTab和modelData中有更多元素。这是一个更新的plunker，其中包含更详细的数据模型：

http://plnkr.co/edit/3k6Ew5YWFQhDw77UpSB8?p=preview

注意：我使用不同的功能来显示正确的型号和规格。我只是使用ng-if="$first"来简化演示。

Answer 1

您需要对数据进行ng-repeat管理，并遵循pTab中数据的分层遍历： -

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

plunker

如何在同一个表中显示这两个嵌套ng-repeats中的元素

1 个答案: