如何在一個表格行中使用兩個ng-repeat？

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重複將加載的事件，有些事件是重複的，所以我想展示從下面彼此重複發生的事件的所有事件。第二次ng-repeat會加載屬於特定事件的日期。

現在我想在一個表中重構這一點，但我無法弄清楚如何讓一個錶行從兩NG-重複數據..

我需要，因爲一些數據表我想排序/篩選，這在網格中目前是不可能的。 （如果我是正確的）

更新所有

首先，感謝已經是答案。 輸出必須是這樣的： 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.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 2

你期待與「profileCtrl.eventDates（event，profileCtrl.user）」重新數組與一個值？

Answer 3

嘗試使用angular.merge（{}，obj1，obj2）;

它正常工作對我來說：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); 

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

Answer 4

如果你只是檢索與一個值的數組，你不需要嵌套NG重複。 你可以使用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>