在嵌套的ng-repeat Angularjs中重复父行？答案

【问题标题】：Repeat parent row in nested ng-repeat Angularjs?在嵌套的ng-repeat Angularjs中重复父行？
【发布时间】：2017-05-05 17:13:19
【问题描述】：

我有一个显示嵌套 ng-repeat 值的表。 HTML 看起来像这样。

<table class="table">
             <thead class="bgThead">
                <tr>
                    <th>Environment</th>
                    <th>Configurations</th>
                    <th>Servers</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="environment in serverList.environments" ng-class-odd="''" ng-class-even="'dataTableOdd'">
                    <td>{{environment.Environment}}</td>
                    <td ng-repeat="servertypeinfo in environment.ServerTypeInfo">{{servertypeinfo.Type}}</td>
                    <td ng-repeat="servertypeinfo in environment.ServerTypeInfo">
                        {{servertypeinfo.ServerConfigInfo.length}}

                        <td ng-repeat="servers in servertypeinfo.ServerConfigInfo">{{servers.ServerName}}</td>
                    </td> 
                </tr>
            </tbody>
        </table>

现在，当子 ng-repeat 中有多个值时，TD 会重复，相反，我希望使用相同的值重复整行，但新的子值除外。进一步嵌套的 ng-repeats 也是如此。我做了一个 plunk，显示了我的目标。

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

【问题讨论】：

标签： javascript angularjs angularjs-ng-repeat

【解决方案1】：

没有表格的例子，可能不是你要找的

<div class="form-group" ng-repeat="environment in serverList.environments track by $index">
    <div class="col-md-4">
        <span ng-bind="environment.environment"></span>
    </div>
    <div class="col-md-8">
        <ul class="list-group">
            <li id="{{$index}}" ng-repeat="servertypeinfo  in environment.serverTypeInfo track by $index">
                Server Type: <span style="font-size: 16px;" class="no-margin" ng-bind="servertypeinfo.type">{{servertypeinfo.serverConfigInfo.length}}</span>
                <p class="no-margin" ng-repeat="server  in servertypeinfo.serverConfigInfo">
                    Server Name: {{server.serverName}}
                </p>
            </li>
        </ul>
    </div>
</div>

【讨论】：

【解决方案2】：

使用这样的格式

 <tbody>
  <tr ng-repeat="environment in serverList.environments" ng-class-odd="''" ng-class-even="'dataTableOdd'">
     <td>
       <table>
         <tr ng-repeat="servertypeinfo in environment.ServerTypeInfo">
            <td>{{environment.Environment}}</td>
            <td>{{servertypeinfo.Type}}</td>
            <td>
                {{servertypeinfo.ServerConfigInfo.length}}

                <td ng-repeat="servers in servertypeinfo.ServerConfigInfo">{{servers.ServerName}}</td>
            </td> 
         </tr>
       </table>
     </td>
  </tr>
</tbody>

【讨论】：