Ответ 1
Сделайте $scope.dates массив массивов со днями.
Каждый массив внутри него представляет собой строку, и каждый день внутри массива строк находится день
Смотрите обновленный JSFiddle http://jsfiddle.net/6aqtj/1/
Использование 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/
Ответы
Ответ 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]);
Ответ 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, которые вы можете прочитать здесь подробно: