Question

我正在努力将网格重构到表格中。在当前网格中，我将有两个ng-repeats来从控制器加载正确的数据。见下文：

<div class="container-fluid">
<br/>
<div class="row">
    <div class="col-xs-3"> <b>{{ 'title' | translate}}</b></div>
    <div class="col-xs-2"><b>{{ 'date' | translate}}</b></div>
    <div class="col-xs-3"><b>{{ 'time' | translate}}</b></div>
    <div class="col-xs-2"><b>{{ 'EventState' | translate}}</b></div>
    <div class="col-xs-2"></div>
    <br/>
    <br/>
</div>
<div class="row editEventTabs" ng-repeat="event in profileCtrl.user._events">
    <div ng-repeat="date in profileCtrl.eventDates(event, profileCtrl.user) ">
        <div class="col-xs-3"><a href="/#/eventProfile/{{event._id}}/{{date}}">{{event.title}}</a></div>
        <div class="col-xs-2">{{ date }}</div>
        <div class="col-xs-3"><i>{{ event.start | date:'HH:mm' }} - {{ event.end | date:'HH:mm' }}</i></div>
        <div class="col-xs-2">{{ event.eventStatus | translate }}</div>
        <button class="col-xs-2 btn btn-default" ng-click="profileCtrl.unsubscribe(event, date)">{{ 'unSubscribe' | translate }}</button>
        <br/>
        <br/>
    </div>
</div>

第一个ng-repeat将加载事件，并且一些事件会重复发生，因此我希望显示彼此之下的重复事件中的所有事件。第二个ng-repeat将加载属于特定事件的日期。

现在我想在表中重构这个，但我无法弄清楚如何从一个表行中的两个ng-repeats中获取数据。

我需要一个表，因为我想要排序/过滤一些数据，这在网格中是不可能的。（如果我是对的）

更新

首先，感谢大家的回答。输出必须是这样的： Lay out

因此，从控制器中检索事件和日期的链接。

更新2

现在正在运作。使用此代码：

<div class="container-fluid">

<table class="table">
    <tr>
        <th> {{ 'title' | translate}} </th>
        <th> {{ 'date' | translate}} </th>
        <th> {{ 'startTime' | translate}} </th>
        <th>{{ 'endTime' | translate }}</th>
        <th> {{ 'state' | translate}} </th>
        <th></th>
    </tr>

    <tbody ng-repeat="event in profileCtrl.user._events  ">
        <tr ng-repeat="date in profileCtrl.eventDates(event, profileCtrl.user) | orderBy: date " >
            <td><a href="/#/eventProfile/{{event._id}}/{{date}}">{{event.title}}</a></td>
            <td> {{date }}
            </td>
            <td>
                {{ event.start | date:'HH:mm' }}
            </td>
            <td>
                {{ event.end | date:'HH:mm' }}</td>
            <td>
                {{ event.eventStatus | translate }}
            </td>
            <td>
                <button class="btn btn-default" ng-click="profileCtrl.unsubscribe(event, date)">{{ 'unSubscribe' | translate }}</button>
            </td>
        </tr>
    </tbody>
</table>

谢谢大家的帮助！

Answer 1

你期望“profileCtrl.eventDates（event，profileCtrl.user）”重新数组有一个值吗？

Answer 2

如果只检索具有一个值的数组，则不需要嵌套的ng-repeat。您可以使用ng-init检索所需的日期。

<div class="container-fluid">

<table class="table">
    <tr>
        <th> {{ 'title' | translate}} </th>
        <th> {{ 'date' | translate}} </th>
        <th> {{ 'startTime' | translate}} </th>
        <th>{{ 'endTime' | translate }}</th>
        <th> {{ 'state' | translate}} </th>
        <th></th>
    </tr>

    <tbody>
        <tr ng-repeat="event in profileCtrl.user._events" ng-init="date = profileCtrl.eventDates(event, profileCtrl.user)[0]">
            <td><a href="/#/eventProfile/{{event._id}}/{{date}}">{{event.title}}</a></td>
            <td> {{date }}
            </td>
            <td>
                {{ event.start | date:'HH:mm' }}
            </td>
            <td>
                {{ event.end | date:'HH:mm' }}</td>
            <td>
                {{ event.eventStatus | translate }}
            </td>
            <td>
                <button class="btn btn-default" ng-click="profileCtrl.unsubscribe(event, date)">{{ 'unSubscribe' | translate }}</button>
            </td>
        </tr>
    </tbody>
</table>

Answer 3

根据您的事件对象结构，您应该在 profileCtrl.user._events 中的每个对象中都有一个日期数组：

{
    _id: 'your event id'
    title: 'Sample title',
    start: [Date Object],
    end: [Date Object],
    eventStatus: 'your event status',
    dates: [
        [Date Object],
        [Date Object],
        [Date Object]
    ]
}

<强>模板

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>{{ 'title' | translate}}</th>
                    <th>{{ 'date' | translate}}</th>
                    <th>{{ 'time' | translate}}</th>
                    <th>{{ 'EventState' | translate}}</th>
                </tr>
                </thead>
                <tbody>

                <!-- Iterating events -->
                <tr ng-repeat="event in profileCtrl.user._events"> 
                    <td>
                        {{event.title}}
                    </td>
                    <td>
                        <!-- Iterating event.dates -->
                        <ul ng-repeat="date in event.dates">
                            <li>
                                {{date}} - 
                                <a href ng-click="profileCtrl.unsubscribe(event, date)">{{ 'unSubscribe' | translate }}</a>
                            </li>
                        </ul>
                    </td>
                    <td>
                        {{ event.start | date:'HH:mm' }} - {{ event.end | date:'HH:mm' }}
                    </td>
                    <td>
                        {{ event.eventStatus | translate }}
                    </td>
                </tr>

                </tbody>
            </table>
        </div>
    </div>
</div>

Answer 4

尝试使用angular.merge（{}，obj1，obj2）;

它适用于我：http://codepen.io/hmache/pen/qNXZNZ

""

来源：https://docs.angularjs.org/api/ng/function/angular.merge

如何在一个表格行中使用两个ng-repeats？

4 个答案: