Question

我正在尝试将模型中的数据插入到模板中，但我想在每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>

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

Answer 1

使用日期使$scope.dates数组成为数组。

它内部的每个数组都是一行，并且行的数组中每天都是一天

请参阅此更新的JSFiddle http://jsfiddle.net/6aqtj/1/

Answer 2

您可以使用当前数据轻松完成此操作。我刚刚添加了一个简单的过滤器：http://jsfiddle.net/3zhbB/6/

但这并不是最好的解决方案，因为效率非常低。它必须创建一个新数组并进行大量切片。但它仍然很酷:-D

Answer 3

我同意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;
}

在本月，我打电话给generateWeeks（5,30）。 9月有30天，周六开始（你的日历周是星期一到星期日）。

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

Answer 4

我自己就是这个问题。虽然不是html表，但我将在单个“days”集合中使用无序列表，并使用css使其看起来像一个表。因此，如果每个元素的宽度为14％，它将自动换行为7。

这是我的方法的起源： Creating three-column table with CSS only? (No table element)

Answer 5

您可以使用$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>

正如你所看到的，它包裹了......它不是一张桌子，真的。

Answer 6

这是一个古老的问题，但现在却有一个干净的答案！使用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/

Answer 7

对于角度5以上的用户，请使用ngFor而不是ng-repeat。

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

对表格行使用ng-repeat

7 个答案: