2017-05-05 10 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> 
探しているものではないかもしれません
関連する問題