Html 将子列属性添加到下一行

Html 将子列属性添加到下一行,html,css,angular-material,Html,Css,Angular Material,我正在处理票证分发项目,我想将子列迭代列表添加到同一父票证的下一行。 如模型(Stag x 4)和下一行(耦合x 1)中所述 以下是设计模型: 这是角度代码: 所有事件 搜寻 创建新事件 事件名称 活动日期 位置 票名 售票 收入 地位 细节 行动 编辑 {{event.name} {(event.schedule[0]['startDateTime']*1000){日期:'dd/MM/yyyy,hh:MM a'} {{event.location[0]['name']} {{tick

我正在处理票证分发项目,我想将子列迭代列表添加到同一父票证的下一行。 如模型(Stag x 4)和下一行(耦合x 1)中所述

以下是设计模型:

这是角度代码:


所有事件
搜寻
创建新事件
事件名称
活动日期
位置
票名
售票
收入
地位
细节
行动
编辑
{{event.name}
{(event.schedule[0]['startDateTime']*1000){日期:'dd/MM/yyyy,hh:MM a'}
{{event.location[0]['name']}
{{ticket.ticketName}
{{ticket.ticketBooked}
{{ticket.ticketBooked*ticket.basePrice}
跑步
期满
看法
结束预订
公开预订
编辑

这可能会有帮助,谢谢你的帖子
<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>