Wie benutzt man zwei ng-Wiederholungen in einer Tabellenzeile?

Question

Ich habe Probleme mit der Umgestaltung eines Gitters zu einem Tisch. Im aktuellen Raster habe ich zwei ng-Wiederholungen, um die korrekten Daten von einem Controller zu laden. Siehe unten:

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

Die erste ng-Wiederholung wird die Ereignisse laden, und einige der Ereignisse wiederkehrend, so möchte ich die Ereignisse alle untereinander von einem wiederkehrenden Ereignis zeigen. Die zweite ng-Wiederholung lädt das Datum, das zu einem bestimmten Ereignis gehört.

Jetzt möchte ich dies in einer Tabelle, Refactoring, aber ich kann nicht herausfinden, wie die Daten aus den beiden in einer ng-Wiederholungen Tabellenzeile zu bekommen ..

ich wegen einiger Daten eine Tabelle benötigen Ich möchte sortieren/filtern, was momentan in einem Grid nicht möglich ist. (Wenn ich rechts)

UPDATE

Zunächst bedankt sich bei allen für die Antwort bereits. Die Ausgabe muss in etwa so aussehen: Lay out

So werden die Verknüpfung des Ereignisses und das Datum von den Controllern abgerufen.

UPDATE 2

Es arbeitet jetzt. Mit diesem 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> 

Dank alle für die Hilfe!

Answer 1

auf Ihr Event Objektstruktur Je sollten Sie eine Reihe von Terminen innerhalb jedes Objekt in profileCtrl.user._events haben:

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

Vorlage

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

Erwarten Sie mit "profileCtrl.eventDates (event, profileCtrl.user)" re-Array mit einem Wert?

Answer 3

Versuchen zu verwenden angular.merge ({}, obj1, obj2);

Es funktioniert gut für mich: http://codepen.io/hmache/pen/qNXZNZ

scope.obj1 = [{ 
    id: 1, 
    city: 'NYS' 
    }, { 
    id: 2, 
    city: 'haway' 
    }]; 

    $scope.obj2 = [{ 
    race: 'Human', 
    name: 'Alex' 
    }, { 
    race: 'Alien', 
    name: 'Ho' 
    }]; 

    $scope.data = angular.merge({}, $scope.obj1, $scope.obj2); 

Quelle: https://docs.angularjs.org/api/ng/function/angular.merge

Answer 4

Wenn Sie nur ein Array mit einem Wert abzurufen, müssen Sie nicht eine verschachtelte ng-repeat müssen. Sie können das gewünschte Datum mit ng-init abrufen.

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