使用ng-repeat的AngularJS Vertical表

Question

I have an array of objects, I want to build a table using ng-repeat that will insert data in the correct columns.

Right now I am doing it like this and I can't get it the correct way.

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

Sample Data

        $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

If I understood correctly, you want to show a company only if it belongs to a room, this way you need to group companies in rooms

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

You can see an working example here

Answer 2

Since you are having same data in each row except timing you can make a copy of this array. If data array is not too long then you can do it like this.

Make a copy of this array in registrationCTRL.js

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

and then iterate it like this

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

working example here

Answer 3

May be this is what you want:

Here I have to assume that you have only roomOne's data in that array. Add data for the remaining three room into the same array (8 company in each). Now you will have (no. of timeslots * no. of rooms) data in the array do the ng-repeat for no. of timeslots times.

first iteration prints 0-8 (8*$index to 8*($index+1)+8), $index = 0

second iteration prints 9-16 (8*$index+1 to 8*($index+1)+8), $index = 1

third iteration prints 17-24 (8*$index+1 to 8*($index+1)+8), $index = 2

Fourth iteration prints 25-32 (8*$index+1 to 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>

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