在清单中循环浏览清单并填写表格

Question

我尽力解释得尽可能清楚，因为很难解释我到底想做什么：

我有以下名称列表：

{
    "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-星期五-沃克-亨德森-科尔-罗宾逊

我怎样才能解决这个问题？

Answer 1

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

在清单中循环浏览清单并填写表格

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-11-15 15:49:26

在清单中循环浏览清单并填写表格

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-11-15 15:49:26

解决方案1
2 已采纳 2016-11-15 15:49:26