Roy Roy - 5 months ago 20
AngularJS Question

How to use two ng-repeats in one table row?

I am struggling with some refactoring of a grid to a table. In the current grid I will have two ng-repeats to load the correct data from a controller.
See below:

<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>




The first ng-repeat will load the events, and some of the events are recurring, so I want to show all the events from a recurring event below each other. The second ng-repeat will load the date which belong to a specific event.

Now i want to refactor this in a table, but I can't figure out how to get the data from the two ng-repeats in one table row..

I need a table because of some data I want to sort / filter, which is currently not possible in a grid. (If I am right)

UPDATE

First, thanks all for the answer already.
The output must be something like this:
Lay out

So, the link of the event and the date are retrieved from the controllers.

UPDATE 2

It is working now. With this code:

<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>




Thanks all for the help!

Answer

Depending on your event object structure, you should have an array of dates inside each object in 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]
    ]
}

template

<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>