Question

我有一个显示嵌套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也是如此。我做了一个插图，显示了我的目标。

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

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

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

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

2 个答案: