MrBuggy MrBuggy - 17 days ago 5
AngularJS Question

Loop throught list in circle and fill in table

I give my best to explain it as clear as possible, because it's hard to explain, what I exactly try to do:

I've got this list of names:

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


In this list I can select the name, where I would start my loop (below I explain how).

Now I need to loop a table like in this attachement:

enter image description here

So I loop the list for the current month (for example "December" of this year). In the first table-row, I start with the first date (1), the first day of this month (in this example this would be "Thursday") and then in the next three table-data I loop the names, starting with my selected name (in this example it would be "Walker", so the second item of my list". Than I loop throught the list till the end of the month (walker -> henderson -> robinson -> walker etc. till the last day of the month). I also have to check, it the day of the current looped table-row is a Sunday, and skip this table row and fill it with "Sunday" and go on on the next table-row. So I have to loop the exact days of a monts (1-30, 1-31 or february 1-28/29), loop the current days (Monday - Sunday) and loop the list in a circle beginning with my selected item till the end of the month with escaping Sundays. I havn't got an idea how to do this. I would like to do this with
ng-repeat
. Has someone got an idea? Thanks.

Answer

You could use some JS to get the days in a given month and parse into an array, then feed that to ng-repeat. Example plunker.

I borrowed some code from this post. In your view, something like this:

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

In your controller, something like this:

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