2017-05-05 54 views
0

我有一個表顯示嵌套的ng-repeat值。 HTML看起來像這樣。在嵌套的ng-repeat Angularjs中重複父行?

<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重複多個值,則TD所得到重複,而不是我要重複整行,用相同的價值觀,除了新來的孩子的價值。嵌套ng重複也是一樣。我做了一個顯示我所瞄準的東西。

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

回答

0

使用像不表這個

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