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

Issue

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?

Solution

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>

Answered By – Ozan

Answer Checked By – Candace Johnson (FlutterFixes Volunteer)