[英]Loop throught list in circle and fill in table
我盡力解釋得盡可能清楚,因為很難解釋我到底想做什么:
我有以下名稱列表:
{
"Items": [
{
"Id": 0,
"Name": "Robinson"
},
{
"Id": 1,
"Name": "Walker"
},
{
"Id": 2,
"Name": "Henderson"
}
}
在此列表中,我可以選擇名稱,從該名稱開始循環(在下面說明方式)。
現在,我需要像這樣的附件中循環一個表:
因此,我循環了當月的列表(例如今年的“十二月”)。 在第一個表格行中,我從第一個日期(1)開始,即本月的第一天(在本例中為“ Thursday”),然后在接下來的三個表格數據中,我將名稱循環,從我選擇的名稱(在本示例中為“ Walker”,因此是列表的第二項。)然后我遍歷列表直到月底(沃克->亨德森->羅賓遜->沃克等,直到我還必須檢查一下,當前循環表行的日期是星期天,然后跳過此表行,並用“星期日”填充它,然后繼續下一個表行。我必須循環播放monts的確切日期(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。 例子punker。
我從這篇文章中借了一些代碼。 在您看來,是這樣的:
<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>
在您的控制器中,如下所示:
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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.