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> {{ }}</td>
        <td> {{ }}</td>

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?


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) {
         'site' : customer.sites[0].name
           'site' :
   return result;
<tr ng-repeat="customerSite in customerAndSiteNames">
    <td> {{ customerSite.customer }}</td>
    <td> {{ }}</td>

Answered By – Ozan

Answer Checked By – Candace Johnson (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.