AngularJS Vertikale Tabelle mit ng-repeat

Question

Ich habe ein Array von Objekten, ich möchte eine Tabelle mit ng-repeat erstellen, die Daten in die richtigen Spalten einfügen wird.

Im Moment mache ich es so und ich kann es nicht richtig bekommen.

Bitte sehen Plunker for more details

<div class container> 
    <div class="row"> 
    <div class="col-md-12"> 
     <table border='0' cellpadding='0' cellspacing='0'> 
     <tr> 
      <th>Time()</th> 
      <th>Room - One</th> 
      <th>Room - Two</th> 
      <th>Room - Three</th> 
      <th>Room - Four</th> 
     </tr> 
     <tr ng-repeat="company in dataOne track by $index"> 
      <td>{{company.start}} - {{company.end}}</td> 
      <td>{{company.company}}</td> 
      <td>{{company.company}}</td> 
      <td>{{company.company}}</td> 
      <td>{{company.company}}</td> 
     </tr> 
     </table> 
    </div> 
    </div> 
</div> 

Beispieldaten

 $scope.dataOne = [{ 

    "start": "7:30", 
    "end": "8:00", 
    "company": "Sony" 
    }, { 
    "start": "7:30", 
    "end": "8:00", 
    "company": "LG" 
    }, { 
    "start": "7:30", 
    "end": "8:00", 
    "company": "UPS" 
    }, { 
    "start": "7:30", 
    "end": "8:00", 
    "company": "MSI" 
    }, { 
    "start": "8:00", 
    "end": "8:30", 
    "company": "Samsung" 
    }, { 
    "start": "8:00", 
    "end": "8:30", 
    "company": "Tesco" 
    }, { 
    "start": "8:00", 
    "end": "8:30", 
    "company": "VW" 
    }, { 
    "start": "8:00", 
    "end": "8:30", 
    "company": "Audi" 
    }, { 
    "start": "9:00", 
    "end": "9:30", 
    "company": "BMW" 
    }, { 
    "start": "9:00", 
    "end": "9:30", 
    "company": "Sunoco" 
    }, { 
    "start": "9:00", 
    "end": "9:30", 
    "company": "Blizzard" 
    }, { 
    "start": "9:00", 
    "end": "9:30", 
    "company": "CS" 
    }, { 
    "start": "9:30", 
    "end": "10:00", 
    "company": "Mazda" 
    }, { 
    "start": "9:30", 
    "end": "10:00", 
    "company": "Nissan" 
    }, { 
    "start": "9:30", 
    "end": "10:00", 
    "company": "Porsche" 
    }, { 
    "start": "9:30", 
    "end": "10:00", 
    "company": "Hyundai" 
    }] 
    console.log($scope.dataOne) 

Answer 1

Wenn ich das richtig verstanden, Sie wollen nur ein Unternehmen zeigen, wenn es zu einem Raum gehört, auf diese Weise zu gruppieren Unternehmen müssen in Räume

{ 
     "start": "8:25", 
     "end": "9:00", 
     "rooms":{ 
     3:{ 
      "company": "companyOne, Inc." 
     } 
     } 
} 

Sie können ein funktionierendes Beispielsehen 210

Answer 2

Da Sie in jeder Zeile mit Ausnahme des Timings dieselben Daten haben, können Sie eine Kopie dieses Arrays erstellen. Wenn das Daten-Array nicht zu lang ist, können Sie es so machen.

eine Kopie dieses Array Stellen in registrationCTRL.js

$scope.dataTwo = angular.copy($scope.dataOne); 

und dann wie diese

<div class="row"> 
    <div class="col-md-12"> 
     <table border='0' cellpadding='0' cellspacing='0'> 
     <tr> 
      <th>Time()</th> 
      <th>Room - One</th> 
      <th>Room - Two</th> 
      <th>Room - Three</th> 
      <th>Room - Four</th> 
     </tr> 
     <tr ng-repeat="companyRow in dataOne track by $index"> 
      <td>{{::companyRow.start}} - {{::companyRow.end}}</td> 
      <td ng-repeat="companyCol in dataTwo track by $index"> 
      {{::companyCol.company}} 
      </td> 
     </tr> 
     </table> 
    </div> 
    </div> 
</div> 

Arbeitsbeispiel iterieren here

Answer 3

dies sein kann, ist, was Sie wollen:

Hier muss ich davon ausgehen, dass Sie nur roomOne Daten in diesem Array haben. Fügen Sie Daten für die verbleibenden drei Räume in das gleiche Array ein (jeweils 8 Unternehmen). Jetzt haben Sie (Nr. Von Zeitschlitze * Nr. Von Räumen) Daten im Array machen Sie die ng-Wiederholung für Nr. von Zeitschlitzen mal.

erste Iteration druckt 0-8 (8 * $ Index 8 * ($ index + 1) +8), $ index = 0

zweiten Iteration druckt 9-16 (8 * $ index + 1 bis 8 *, $ index = 1

dritte Iteration druckt 17-24 (8 * $ index + 1 bis 8 * ($ index + 1) +8), $ index 2 =

vierte Iteration Druck 25-32 (8 * $ index + 1 bis 8 * ($ index + 1) +8), $ index = 3

JS

(function() { 
"use strict"; 

angular 
.module("app") 
.controller("registrationCTRL", function($scope) { 

    $scope.dataOne = [{ 

     "start": "7:50", 
     "end": "8:25", 
     "company": "companyOne, Inc. in room-1" 
    }, { 
     "start": "8:25", 
     "end": "9:00", 
     "company": "companyTwo, Inc. in room-1" 
    }, 

    { 
     "start": "8:25", 
     "end": "9:00", 
     "company": "companyThree, Inc. in room-1" 
    }, { 
     "start": "9:00", 
     "end": "9:25", 
     "company": "companyFour, Inc. in room-1" 
    }, 

    { 
     "start": "9:25", 
     "end": "10:00", 
     "company": "companyFive, Inc. in room-1" 
    }, { 
     "start": "10:00", 
     "end": "10:25", 
     "company": "companySix, Inc. in room-1" 
    }, 

    { 
     "start": "10:25", 
     "end": "11:00", 
     "company": "companySeven, Inc. in room-1" 
    }, { 
     "start": "11:00", 
     "end": "11:25", 
     "company": "companyEight, Inc. in room-1" 
    }, 
    { 

     "start": "7:50", 
     "end": "8:25", 
     "company": "companyNine, Inc. in room-2" 
    }, { 
     "start": "8:25", 
     "end": "9:00", 
     "company": "companyTen, Inc. in room-2" 
    }, 

    { 
     "start": "8:25", 
     "end": "9:00", 
     "company": "companyEleven, Inc. in room-2" 
    }, { 
     "start": "9:00", 
     "end": "9:25", 
     "company": "companyTwelve, Inc. in room-2" 
    }, 

    { 
     "start": "9:25", 
     "end": "10:00", 
     "company": "companyThirteen, Inc. in room-2" 
    }, { 
     "start": "10:00", 
     "end": "10:25", 
     "company": "companyFourteen, Inc. in room-2" 
    }, 

    { 
     "start": "10:25", 
     "end": "11:00", 
     "company": "companyFifteen, Inc. in room-2" 
    }, { 
     "start": "11:00", 
     "end": "11:25", 
     "company": "companySixteen, Inc. in room-2" 
    }, 
    { 

     "start": "7:50", 
     "end": "8:25", 
     "company": "companySeventeen, Inc. in room-3" 
    }, { 
     "start": "8:25", 
     "end": "9:00", 
     "company": "companyEighteen, Inc. in room-3" 
    }, 

    { 
     "start": "8:25", 
     "end": "9:00", 
     "company": "companyNineteen, Inc. in room-3" 
    }, { 
     "start": "9:00", 
     "end": "9:25", 
     "company": "companyTwenty, Inc. in room-3" 
    }, 

    { 
     "start": "9:25", 
     "end": "10:00", 
     "company": "companyTwentyOne, Inc. in room-3" 
    }, { 
     "start": "10:00", 
     "end": "10:25", 
     "company": "companyTwentyTwo, Inc. in room-3" 
    }, 

    { 
     "start": "10:25", 
     "end": "11:00", 
     "company": "companyTwentyThree, Inc. in room-3" 
    }, { 
     "start": "11:00", 
     "end": "11:25", 
     "company": "companyTwentyFour, Inc. in room-3" 
    }, 
    { 

     "start": "7:50", 
     "end": "8:25", 
     "company": "companyTwentyfive, Inc. in room-4" 
    }, { 
     "start": "8:25", 
     "end": "9:00", 
     "company": "companyTwentySix, Inc. in room-4" 
    }, 

    { 
     "start": "8:25", 
     "end": "9:00", 
     "company": "companyTwentySeven, Inc. in room-4" 
    }, { 
     "start": "9:00", 
     "end": "9:25", 
     "company": "companyTwentyEight, Inc. in room-4" 
    }, 

    { 
     "start": "9:25", 
     "end": "10:00", 
     "company": "companyTwentyNine, Inc. in room-4" 
    }, { 
     "start": "10:00", 
     "end": "10:25", 
     "company": "companyThirty, Inc. in room-4" 
    }, 

    { 
     "start": "10:25", 
     "end": "11:00", 
     "company": "companyThirtyOne, Inc. in room-4" 
    }, { 
     "start": "11:00", 
     "end": "11:25", 
     "company": "companyThirtyTwo, Inc. in room-4" 
    } 
    ]; 


    function getRooms(){ 
    return 4; 
    } 

    $scope.getTimeslots = function(num) { 
    return new Array(num/getRooms()); 
    } 


}); 
})(); 

HTML

<tr ng-repeat="i in getTimeslots(dataOne.length) track by $index"> 
     <td>{{dataOne[$index].start}}-{{dataOne[$index].end}}</td> 
     <td>{{dataOne[$index+0*8].company}}</td> 
     <td>{{dataOne[$index+1*8].company}}</td> 
     <td>{{dataOne[$index+2*8].company}}</td> 
     <td>{{dataOne[$index+3*8].company}}</td> 
    </tr> 

Arbeits Plunkr: http://plnkr.co/edit/h0AGmG?p=preview