AngularJS ng-repeatを使用した垂直テーブル

Question

オブジェクトの配列があります。正しい列にデータを挿入するng-repeatを使用してテーブルを作成します。

今の私はこのようにしており、正しい方法ではできません。

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> 

サンプルデータ

 $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

私が正しく理解している場合、あなたはそれが部屋に属している場合にのみ、会社を表示したい、あなたがグループ企業に必要なこの方法をご覧ください。部屋

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

実例はです210

Answer 2

タイミング以外の各行に同じデータがあるので、この配列のコピーを作成できます。データ配列が長すぎない場合は、このようにすることができます。

registrationCTRL.js

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

にこの配列のコピーを作成し、この

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

実施例here

Answer 3

が、これはあなたが望むものであるかもしれませようにそれを繰り返す：

ここでは、roomOneのデータがその配列にあると仮定しなければなりません。残りの3部屋のデータを同じアレイに追加します（それぞれ8社）。 今度は、配列の にng-repeatを実行します（no timeslots * no部屋のデータ）。タイムスロット時間の

第1の反復印刷、$インデックス9-16（8 *の$インデックス+ = 0

第2の反復プリント0-8（8 *（$インデックス+ 1）8から8 *の$インデックス） （$ index + 1〜8 *（$ index + 1）+8）、$ index（1〜8 *（$ index + 1）+8）、$ index = 1

3回目の反復では、 = 2

四反復プリント25-32（8~8 *の$インデックス+ 1 *（$インデックス+ 1）+8）、$インデックス= 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> 

ワーキングPlunkr：http://plnkr.co/edit/h0AGmG?p=preview