我有一个对象数组，我想使用ng-repeat构建一个表，它将在正确的列中插入数据。
现在我这样做，我无法以正确的方式得到它。
<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)
答案 0 :(得分：0)
如果我理解正确，你只想展示一家公司，只要它属于一个房间，这样你就需要将房间内的公司分组
{
"start": "8:25",
"end": "9:00",
"rooms":{
3:{
"company": "companyOne, Inc."
}
}
}
您可以看到一个有效的示例here
答案 1 :(得分：0)
由于除了计时之外每行中都有相同的数据，因此可以复制此数组。如果数据数组不是太长，那么你就可以这样做。
在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
答案 2 :(得分：0)
可能这就是你想要的：
这里我必须假设你在该数组中只有roomOne的数据。将剩下的三个房间的数据添加到同一个阵列中（每个房间中有8个公司）。 现在，您将拥有阵列中的数据（没有时间段*没有房间数据） 做ng-repeat for no。时间段。
第一次迭代打印0-8（8 * $索引到8 *（$ index + 1）+8），$ index = 0
第二次迭代打印9-16（8 * $索引+ 1到8 *（$ index + 1）+8），$ index = 1
第三次迭代打印17-24（8 * $索引+ 1到8 *（$ index + 1）+8），$ index = 2
第四次迭代打印25-32（8 * $索引+ 1到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>