Использование ng-repeat со строками таблицы

Я пытаюсь вставить данные из модели в шаблон, но я хочу добавить новую строку таблицы после каждых 7 повторений. С шаблонами на основе шаблонов я мог бы сделать это довольно легко, используя индекс итерации и модулю, но я не могу понять, как это сделать, используя angular шаблоны DOM.

Здесь HTML:

<div ng-controller="MyCtrl">
  <table cellspacing="0" cellpadding="0">
   <colgroup span="7"></colgroup>

   <tbody>
     <tr class="days">
       <th scope="col" title="Monday">Mon</th>
       <th scope="col" title="Tuesday">Tue</th>
       <th scope="col" title="Wednesday">Wed</th>
       <th scope="col" title="Thursday">Thu</th>
       <th scope="col" title="Friday">Fri</th>
       <th scope="col" title="Saturday">Sat</th>
       <th scope="col" title="Sunday">Sun</th>
     </tr>
     <tr>
         <td ng-repeat="date in dates">
             {{ date }}
             <!-- After seven iterations a new `<tr>` should be aded -->
        </td>
     </tr>
 </tbody>
 </table>
</div>

И javascript это что-то вроде:

myApp = this.angular.module('myApp', []);

var monthDays = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 1516, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31];

myApp.controller('MyCtrl', function($scope) {
  return $scope.dates = monthDays;
});

Здесь вы можете просмотреть код в JSFiddle: http://jsfiddle.net/3zhbB/2/

Ответ 1

Сделайте $scope.dates массив массивов со днями.

Каждый массив внутри него представляет собой строку, и каждый день внутри массива строк находится день

Смотрите обновленный JSFiddle http://jsfiddle.net/6aqtj/1/

Ответ 2

Если вы хотите оставить данные своей области так, как она есть (в виде массива), вы можете написать директиву и инкапсулировать все генерирование HTML там, следовательно:

<div ng-controller="MyCtrl">
    <calendar></calendar>
</div>

myApp.directive('calendar', function() {
// Requires that scope contains a 'monthDays' array.
// Adds 'weeks' to scope.
return {
    restrict: 'E',
    replace: true,
    template: '<table cellspacing="0" cellpadding="0">'
    + ...
    + '<th scope="col" title="Sunday">Sun</th></tr>'
    + '<tr ng-repeat="week in weeks">'
    + '<td ng-repeat="day in week">{{day}}</td>'
    + '</tr></tbody></table>',
    link: function(scope) {
        scope.weeks = [];
        for (var i = 0; i < scope.monthDays.length; i++) {
            if (i % 7 == 0) {
                scope.weeks.push([]);
            }
            scope.weeks[scope.weeks.length-1].push(scope.monthDays[i]);

Fiddle: http://jsfiddle.net/mrajcok/dGpsr/

Ответ 3

Вы можете сделать это довольно легко с вашими текущими данными. Я просто добавил простой фильтр: http://jsfiddle.net/3zhbB/6/

Это не лучшее решение, хотя оно довольно неэффективно. Он должен будет создать новый массив и сделать много нарезки. Но это все еще круто:-D

Ответ 4

Я согласен с Ренаном в отношении массива массивов и попал в попытку сделать это более похожим на календарь. Предполагая, что вам нужны пустые ячейки таблицы, и вы хотите, чтобы месяц начинался в правильный день недели (0-6). Посмотрите на эту функцию:

function generateWeeks(startDay, numDays){
  var weeks = [];
  var numWeeks = (numDays + startDay) / 7;
  for(var i=0; i<numWeeks; i++){
    weeks[i] = [];
    for(var j=0; j<7; j++){
      if(i==0 && j<startDay){
        weeks[i].push('');
      }else{
        var day = (j-startDay+1)+(i*7);
        weeks[i].push(day<=numDays ? day : '');
      }
    }
  }
  return weeks;
}

В течение текущего месяца я бы назвал generateWeeks (5,30). Сентябрь имеет 30 дней и стартовал в субботу (и ваша календарная неделя - понедельник - воскресенье).

<tr ng-repeat="week in weeks">
  <td ng-repeat="day in week">{{day}}
</tr>

Ответ 5

Просто эта проблема была самой. Вместо html-таблиц я собираюсь использовать неупорядоченный список за одну коллекцию "дней" и использовать css, чтобы он выглядел как таблица. Таким образом, если каждый элемент имеет ширину 14%, он автоматически обернется на 7.

Это был генезис моего подхода: Создание таблицы с тремя столбцами только с помощью CSS? (Нет элемента таблицы)

Ответ 6

Вы можете использовать условное выражение, например $index % 7 == 0, для записи </tr><tr>

Я просто создал простую таблицу, например:

<style type="text/css">
    .selectable.year {
        display:inline-block; 
        width:25%;
        border-right-width:0px;
        text-align: center;
    }
    .selectable.year.first {
        margin-left:0;
    }
    .selectable.year.lastcol, .selectable.year:last-child {
        border-right-width:1px;
    }
</style>
<div class="calendar">
    <div class="selectable year" 
        ng-class="{ 'firstcol' : $index % 4 == 0 , 'lastcol' : $index % 4 == 3 }"
        ng-repeat="year in search.yearList"
        <span class="caption">{{ year }}</span>
    </div>
</div>

как вы можете видеть, он обертывает.. его не таблица, правда.

Ответ 7

Это старый вопрос, который, тем не менее, теперь имеет чистый ответ! Весь процесс повторения сложных разделов в angular значительно улучшается за счет использования ng-repeat-start и ng-repeat-end, которые вы можете прочитать здесь подробно:

http://www.undefinednull.com/2015/04/10/repeating-multiple-elements-using-ng-repeat-start-and-ng-repeat-end-in-angularjs/