Loop Повсеместно список в круг и заполнить таблицу

Я даю все возможное, чтобы объяснить это ясно, как это возможно, потому что это трудно объяснить, что я точно пытаюсь сделать:Loop Повсеместно список в круг и заполнить таблицу

Я получил этот список имен:

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

В этом списке я могу выбрать имя, где бы я начал свою петлю (ниже я объясню, как).

Теперь мне нужно в цикле таблицу, как в этом прикрепленного:

Так что петля список за текущий месяц (например, «декабрь» этого года). В первой строке таблицы я начинаю с первой даты (1), в первый день этого месяца (в этом примере это будет «четверг»), а затем в следующих трех табличных данных я зацикливаю имена, начиная с мое выбранное имя (в этом примере это будет «Walker», поэтому второй элемент моего списка ». Чем я прохожу через список до конца месяца (ходок -> henderson -> robinson -> walker и т. д. до в последний день месяца). Мне также нужно проверить, что день текущей петлевой таблицы - это воскресенье, и пропустите эту строку таблицы и заполните ее «воскресенье» и продолжайте следующую таблицу. Я должен зациклять точные дни монтов (1-30, 1-31 или февраль 1-28/29), зацикливать текущие дни (понедельник - воскресенье) и зацикливать список по кругу, начиная с моего выбранного элемента, до конец месяца с побегом воскресенья. У меня не было идеи, как это сделать. Я хотел бы сделать это с ng-repeat. У кого-то есть идея? Спасибо.

EDIT:

Он также должен работать, он у меня есть более 3 пунктов в моем списке, например:

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

Так оно и должно цикл, как это, если мой старт пункт «Walker «:

Row 1 -> 1 - четверг - Уокер - Хендерсон - Коул

Row 2 -> 2 - пятница - Робинсон - Уокер - Хендерсон

Row 3 -> 3 - суббота - Коул - Робинсон - Уокер

Row 4 -> 4 - воскресенье - воскресенье - воскресенье - воскресенье

Row 5 -> 5 - понедельник - Хендерсон - Коул - Робинсон

И так далее ... в тот момент, когда мой список длиннее, чем 3-х элементов, повтор показывает все элементы в одном ряду так это loo кс, как это:

Row 1 -> 1 - четверг - Уокер - Хендерсон - Коул - Робинсон

Row 2 -> 2 - пятница Уокер - Хендерсон - Коул - Робинсон

Как я могу это исправить?

источник

2016-11-15 MrBuggy

Вы можете использовать некоторые 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; 
}

источник

2016-11-15 15:49:26

Привет и первый спасибо за этот хороший ответ. Он отлично работает, чтобы создать правильные дни месяца и пропустить воскресенье, как я спросил. Но как может цикл элементов (список имен) по кругу, когда я выбираю свой первый. Итак, представьте, в вашем решении будет выпадающий список с элементами (Robinson, Walker, Henderson), и я выбираю «Walker» как начальное имя цикла, поэтому цикл будет начинаться с «Walker», затем следующий будет быть «Хендерсоном», а следующим woulbe будет «Робинсон» (потому что после последнего пункта первое приходит снова). Как я могу это сделать? Надеюсь, это достаточно ясно. – MrBuggy

А, я вижу. Позвольте мне быстро обновиться. –

Было бы здорово, спасибо! – MrBuggy

Loop Повсеместно список в круг и заполнить таблицу

ответ

Смежные вопросы