Repeat parent row in nested ng-repeat Angularjs?

Question

I have a table which is displaying nested ng-repeat values. The HTML looks like this.

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

Now, when there are multiple values in child ng-repeat, the TDs are getting repeated, instead I want the whole row to be repeated, with the same values, except the new children value. Same goes with further nested ng-repeats. I made a plunk which shows what I am aiming for.

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

Pavanello · Accepted Answer · 2017-05-05 17:55:50Z

1

Example without table, may not be what you are looking for

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

answered May 5, 2017 at 17:55

Pavanello

112 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sachila Ranawaka · Accepted Answer · 2017-05-05 17:18:35Z

0

use the format like this

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

answered May 5, 2017 at 17:18

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Collectives™ on Stack Overflow

Repeat parent row in nested ng-repeat Angularjs?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related