将子列属性添加到下一行

Question

我正在使用Ticket Distribution项目，我想将子列迭代列表添加到同一父票证的下一行。 如模型（Stag x 4）和下一行（Couple x 1）中所述。

这是设计模型：

这是角度代码：

  

<div class="listEventHeader" style="background-color: white">
    <div layout="row">
        <div flex="20" flex-gt-sm="20" layout="column" layout-align="center" style="padding-left: 24px">
            <div>All Events</div>
        </div>
        <div flex="40" flex-gt-sm="30" flex-offset-gt-sm="45">
            <md-input-container class="md-icon-float md-block">
                <!-- Use floating label instead of placeholder -->
                <label>Search</label>
                <md-icon md-svg-src="img/icons/ic_person_24px.svg" class="name"></md-icon>
                <input type="text">
            </md-input-container>
        </div>
        <div flex="20" flext-gt-sm="40" flex-offset="5" style="padding-top: 10px">
            <md-button class="mdSuccessBtn md-raised">Create New Event</md-button>
        </div>
    </div>
</div>
<div class="listEventBody">
    <md-table-container>
        <table md-table>
            <thead md-head>
                <tr md-row>
                    <th md-column>
                        <div>Event Name</div>
                    </th>
                    <th md-column>
                        <div>Event Date</div>
                    </th>
                    <th md-column>
                        <div>Location</div>
                    </th>
                    <th md-column>
                        <div>Ticket Name</div>
                    </th>
                    <th md-column>
                        <div>Tickets Sold</div>
                    </th>
                    <th md-column>
                        <div>Revenue</div>
                    </th>
                    <th md-column>
                        <div>Status</div>
                    </th>
                    <th md-column>
                        <div>Details</div>
                    </th>
                    <th md-column>
                        <div>Action</div>
                    </th>
                    <th md-column>
                        <div>Edit</div>
                    </th>
                </tr>
            </thead>

            <tbody md-body>
                <tr md-row ng-repeat="event in eventCtrl.eventsList">
                    <td md-cell>
                        <div>{{event.name}}</div>
                    </td>
                    <td md-cell>
                        <div style="white-space: nowrap">
                            {{(event.schedule[0]['startDateTime']*1000) | date: 'dd/MM/yyyy, hh:mm a'}}
                        </div>
                    </td>
                    <td md-cell>
                        <div>{{event.location[0]['name']}}</div>
                    </td>
                    <td md-cell>

                        <div ng-repeat="ticket in event.ticketTypes">{{ticket.ticketName}}</div>
                    </td>
                    <td md-cell>
                        <div ng-repeat="ticket in event.ticketTypes">{{ticket.ticketBooked}}</div>
                    </td>
                    <td md-cell>
                        <div ng-repeat="ticket in event.ticketTypes">{{ticket.ticketBooked * ticket.basePrice}}</div>
                    </td>
                    <td md-cell>
                        <div ng-if="event.status == 1">Running</div>
                        <div ng-if="event.status == 0">Expired</div>
                    </td>
                    <td md-cell>
                        <div ui-sref="transactionState({eventId : event.id, eventName: event.name})" class="selectLink">
                            View
                        </div>
                    </td>
                    <td md-cell>
                        <div ng-if="event.status == 1" ng-click="eventCtrl.changeBookingStatus($ev, $index, event.status)" class="selectLink" style="color: #E62027">
                            Close Booking
                        </div>
                        <div ng-if="event.status == 0" ng-click="eventCtrl.changeBookingStatus($index, event.status)" class="selectLink" style="color: #20E62A">
                            Open Booking
                        </div>
                    </td>
                    <td md-cell>
                        <div ng-click="eventCtrl.editEvent(event.id)" style="cursor: pointer">
                            <i class="material-icons" style="color: gray">edit</i>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <md-table-container>
</div>