Angularjs 对表行使用ng repeat

我试图将模型中的数据插入模板，但我希望在每7次重复之后添加一个新的表行。使用基于strign的模板，我可以很容易地使用迭代索引和模，但我不太明白如何使用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>

---

您可以在JSFiddle中查看代码：

Make

$scope.dates

包含日期的数组

其中的每个数组都是一行，该行数组中的每一天都是一天

---

查看更新后的JSFIDLE

我同意Renan关于数组数组的看法，并试图让它更像日历。假设您想要空白表格单元格，并且希望月份从一周中的正确日期（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;
}

函数生成器ekes（开始日期、numDays）{
var周=[]；
变量numWeeks=（numDays+startDay）/7；
对于（var i=0；i，如果希望保持作用域数据的原样（作为数组），可以编写一个指令，并在那里封装所有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]);


myApp.directive（'calendar'，function（）{
//要求作用域包含“monthDays”数组。
//将“周”添加到范围中。
返回{
限制：'E'，
替换：正确，
模板：“”
+ ...
+“太阳”
+ ''
+“{day}”
+ '',
链接：功能（范围）{
scope.weeks=[]；
对于（变量i=0；i

Fiddle:
您可以非常轻松地使用当前数据执行此操作。我刚刚添加了一个简单的过滤器：

不过，这并不是最好的解决方案，因为它效率很低。它必须创建一个新数组并进行大量切片。但它仍然很酷：-D
我自己也有这个问题。不过，我将在一个“天”内使用无序列表，而不是html表集合并使用css使其看起来像一个表。因此，如果每个元素的宽度为14%，它将自动换行到7

这就是我的方法的起源：
您可以使用类似
$index%7==0的条件来编写

我刚刚创建了一个简单的表，如下所示：

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


.年{
显示：内联块；
宽度：25%；
右边框宽度：0px；
文本对齐：居中；
}
.第一年{
左边距：0；
}
.selective.year.lastcol，.selective.year:最后一个孩子{
右边框宽度：1px；
}
这是一个古老的问题，但现在有了一个清晰的答案！通过使用
ng repeat start
和
ng repeat end
，以角度重复复杂部分的整个过程得到了极大的改进，您可以在此处详细阅读：

对于角度5+使用ngFor，而不是ng重复

 <tr *ngFor="let mi of mileages; let i = index">
                            <td>{{mi.fromAddress}}</td>
</tr>


{{mi.fromAddress}}
谢谢，我希望有一种方法可以在模板内完成，而不改变控制器中的数组。但目前看来这是不可能的。我创建了一个可重用的过滤器，基于这个答案：我非常喜欢这个解决方案。遗憾的是，当JSFIDLE it指向时，SO post如此简短to是如此优雅。然而，有了下划线.js，它就变得更好了：
myApp.filter（'array'，function（）{return}.range；}）；
<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>

 <tr *ngFor="let mi of mileages; let i = index">
                            <td>{{mi.fromAddress}}</td>
</tr>