循环遍历列表并填写表格答案

【问题标题】：Loop throught list in circle and fill in table循环遍历列表并填写表格
【发布时间】：2016-11-15 14:28:26
【问题描述】：

我尽量解释清楚，因为很难解释，我到底想做什么：

我有这份名单：

{
    "Items": [
        {
            "Id": 0,
            "Name": "Robinson"
        },
        {
            "Id": 1,
            "Name": "Walker"
        },
        {
            "Id": 2,
            "Name": "Henderson"
        }
}

在此列表中，我可以选择名称，我将在其中开始循环（下面我将解释如何）。

现在我需要像这个附件一样循环一个表格：

所以我循环当前月份的列表（例如今年的“十二月”）。在第一个表格行中，我从第一个日期 (1)、本月的第一天（在本例中为“星期四”）开始，然后在接下来的三个表格数据中循环名称，从我选择的名字（在这个例子中，它是“Walker”，所以是我列表的第二项”。然后我循环遍历列表直到月底（walker -> henderson -> robinson -> 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 - 星期五 - 沃克 - 亨德森 - 科尔 - 罗宾逊

我该如何解决这个问题？

【问题讨论】：

标签： javascript html angularjs json ng-repeat

【解决方案1】：

您可以使用一些 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>

在您的控制器中，如下所示：

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

【讨论】：

您好，首先感谢您的回答。它可以很好地创建一个月的正确日期并像我要求的那样跳过星期天。但是，当我选择我的第一个项目时，如何将项目（名称列表）循环成一个圆圈。所以想象一下，在您的解决方案中，将是一个带有项目名称（Robinson、Walker、Henderson）的下拉列表，我选择“Walker”作为循环的起始名称，因此循环将以“Walker”开头，然后下一个将是“Henderson”，下一个是“Robinson”（因为在最后一项之后，第一项又来了）。我怎样才能做到这一点？我希望这足够清楚..
好的，查看更新。我们有一个单独的菜单，其中包含可选项目，以及一个名为 items 的数组，我们可以对其进行变异。选择菜单后，我们只需将第一个项目从数组中拉出并将其放在后面，直到我们到达所选项目。我们使用 ng-repeat 两次，一次用于月份的日期，一次用于表格。希望这就是您要找的。span>
这正是我寻找的解决方案，非常感谢！
但我还有一个问题：当我的项目有超过 3 个索引（例如 5 个名称）时，它似乎不像预期的那样工作？你能检查一下吗？谢谢
所以它应该在每第三个项目之后打破 ng-repeat 进入一个新行......