我尽力尽可能清楚地解释它，因为很难解释，我到底想做什么:
我有这个名单:
{
"Items": [
{
"Id": 0,
"Name": "Robinson"
},
{
"Id": 1,
"Name": "Walker"
},
{
"Id": 2,
"Name": "Henderson"
}
}
在此列表中，我可以选择名称，我将在其中开始循环(下面我将解释如何进行)。
现在我需要循环一个表，如附件所示:
因此，我循环当前月份的列表(例如今年的“12 月”)。在第一个表行中，我从第一个日期 (1) 开始，即本月的第一天(在本例中为“星期四”)，然后在接下来的三个表数据中循环名称，从我选择的名字(在这个例子中它将是“Walker”，所以我的列表的第二项“。然后我循环遍历列表直到月底(walker -> henderson -> robinson -> walker 等等，直到该月的最后一天)。我还必须检查当前循环表行的日期是否是星期日，并跳过此表行并用“星期日”填充它，然后继续下一个表行。所以我必须循环一个月的确切日期(1-30、1-31 或 2 月 1-28/29)，循环当前日期(星期一 - 星期日)，并以我选择的项目开始循环列表，直到月底，逃避周日。我不知道如何做到这一点。我想用 ng-repeat 来做到这一点。有人有想法吗？谢谢。
编辑:
它也应该有效，例如，如果我的列表中有超过 3 个项目:
{
"Items": [
{
"Id": 0,
"Name": "Robinson"
},
{
"Id": 1,
"Name": "Walker"
},
{
"Id": 2,
"Name": "Henderson"
},
{
"Id": 3,
"Name": "Cole"
}
}
所以如果我的起始项是“Walker”，它应该像这样循环:
第 1 行 -> 1 - 星期四 - 沃克 - 亨德森 - 科尔
第 2 行 -> 2 - 星期五 - 罗宾逊 - 沃克 - 亨德森
第 3 行 -> 3 - 星期六 - 科尔 - 罗宾逊 - 沃克
第 4 行 ->4 - 周日 - 周日 - 周日 - 周日
第 5 行 -> 5 - 星期一 - 亨德森 - 科尔 - 罗宾逊
依此类推...目前，当我的列表超过 3 个项目时，重复会显示同一行中的所有项目，因此看起来像这样:
第 1 行 -> 1 - 星期四 - 沃克 - 亨德森 - 科尔 - 罗宾逊
第 2 行 -> 2 - 星期五 - 沃克 - 亨德森 - 科尔 - 罗宾逊
我该如何解决这个问题？
最佳答案
您可以使用一些 JS 来获取给定月份中的天数并解析为数组，然后将其提供给 ng-repeat。 Example plunker.
我从this post借了一些代码。在你看来，是这样的:
<body ng-controller="MainCtrl">
<select ng-model="selected" ng-change="shuffle(selected)">
<option ng-repeat="i in menuItems" value="{{i.Name}}">{{i.Name}}</option>
</select>
<table>
<tr>
<th>Date</th>
<th>Day</th>
<th>07:00-12:00</th>
<th>12:00-17:00</th>
<th>17:00-22:00</th>
</tr>
<tr ng-repeat="n in month">
<td>{{n.date}}</td>
<td>{{n.day}}</td>
<td ng-repeat="name in items">{{n.day !== "Sunday" ? name : n.day}}</td>
</tr>
</table>
</body>
在你的 Controller 中，类似这样:
app.controller('MainCtrl', function($scope) {
$scope.menuItems = [
{
"Id": 0,
"Name": "Robinson"
},
{
"Id": 1,
"Name": "Walker"
},
{
"Id": 2,
"Name": "Henderson"
}];
$scope.month = getDaysArray(2016, 12);
$scope.items = ["Robinson", "Walker", "Henderson"];
$scope.shuffle = function(selected) {
let index = $scope.items.indexOf(selected);
for (let i = 0; i < $scope.items.length; i++) {
if (i < index) $scope.items.push($scope.items.shift());
}
}
});
function getDaysArray(year, month) {
var numDaysInMonth, daysInWeek, daysIndex, index, i, l, daysArray;
numDaysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
daysInWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
daysIndex = { 'Sun': 0, 'Mon': 1, 'Tue': 2, 'Wed': 3, 'Thu': 4, 'Fri': 5, 'Sat': 6 };
index = daysIndex[(new Date(year, month - 1, 1)).toString().split(' ')[0]];
daysArray = [];
for (i = 0, l = numDaysInMonth[month - 1]; i < l; i++) {
let n = {date: (i+ 1), day: daysInWeek[index++]};
daysArray.push(n);
if (index == 7) index = 0;
}
return daysArray;
}
关于javascript - 循环遍历列表并填充表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40612340/