CODEWITHSUNDEEP
angularjsdartangular-dart
Mikhail Turilin
Mikhail Turilin

Reputation: 75

AngularDart: How to use two ng-repeat expressions with one tag?

I need to create a grouped table, similar to:

    Customer            Site
    ------------------------------
    Customer 1          Site 1.1
                        Site 1.2
                        Site 1.3
    Customer 2          Site 2.1
                        Site 2.2

To do so in HTML I would need to attach two ng-repeats to a single tr element:

    <tr ng-repeat="customer in customers" ng-repeat="site in customer.sites">
        <td> {{ customer.name }}</td>
        <td> {{ site.name }}</td>
    </tr>

This exact syntax doesn't work. Div and Span tags inside the Tbody are not allowed. I would prefer not to pre-format data in the controller. I just need a way to use two ng-repeats with a single TR tag. Is it possible?

Upvotes: 2

Views: 7566

Answers (4)

jim31415
jim31415

Reputation: 8808

You could try using ng-repeat-start to accomplish this:

<tr ng-repeat-start="customer in customers"> 
   <tr ng-repeat-end ng-repeat="site in customer.sites">
      <td> {{ customer.name }}</td>
      <td> {{ site.name }}</td>
   </tr>
</tr>

Upvotes: 0

Ozan
Ozan

Reputation: 4415

Use a table model and a single ng-repeat.

Take the customers list and convert it into something that represents the rows of your table:

get customerAndSiteNames () {
   // naive approach. maybe use List.expand
   var result = [];
   customers.foreach((customer) {
       result.add({
         'customer': customer.name
         'site' : customer.sites[0].name
       });
       customer.sites.sublist(1).forEach((site){
         result.add({
           'site' : site.name
       }
   }
   return result;
}

<tr ng-repeat="customerSite in customerAndSiteNames">
    <td> {{ customerSite.customer }}</td>
    <td> {{ customerSite.site }}</td>
</tr>

Upvotes: 3

Lawrence Choy
Lawrence Choy

Reputation: 6108

You can make use of rowspan:

<table>
      <tbody ng-repeat="customer in customers">
        <tr ng-repeat="site in customer.sites">
          <td rowspan="{{customer.sites.length}}" ng-if="$index==0">{{customer.name}}</td>
          <td>{{site.name}}</td>
        </tr>
      </tbody>
    </table>

Here is a working plunker

The ng-if part means that only add the tr DOM for the first row. It looks like it can be improved, but it gets the job done at least.

Upvotes: 0

Mikhail Turilin
Mikhail Turilin

Reputation: 75

So far I found one solution. Apparently tbody tag could be repeated.

So I can do something like:

<tbody ng-repeat="customer in customers">
    <tr ng-repeat="site in customer.sites">
        <td> {{ customer.name }}</td>
        <td> {{ site.name }}</td>
    </tr>
</tbody>

However, the initial question still stands.

Upvotes: 2

Related Questions