25

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

4

8 回答 8

26

用天制作$scope.dates一个数组。

它里面的每个数组都是一行，行数组里面的每一天都是一天

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

于 2012-09-20T18:23:03.343 回答
9

如果您想保留作用域数据的原样（作为数组），您可以编写一个指令，并在那里封装所有 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]);

小提琴：http: //jsfiddle.net/mrajcok/dGpsr/

于 2012-09-20T20:44:00.590 回答
5

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

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

于 2012-09-20T22:39:32.693 回答
4

我同意 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)。九月有 30 天，从星期六开始（你的日历周是星期一 - 星期日）。

<tr ng-repeat="week in weeks">
  <td ng-repeat="day in week">{{day}}
</tr>
于 2012-09-20T18:46:24.347 回答
1

我自己刚遇到这个问题。不过，我将在单个“天”集合上使用无序列表而不是 html 表，并使用 css 使其看起来像一个表。因此，如果每个元素的宽度为 14%，它将自动换行到 7。

这就是我的方法的起源： 只用 CSS 创建三列表？（没有表格元素）

于 2013-04-17T23:40:50.260 回答
0

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

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

于 2016-02-19T14:26:03.847 回答
0

对于 angular 5+，使用 ngFor 而不是 ng-repeat。

 <tr *ngFor="let mi of mileages; let i = index">
                            <td>{{mi.fromAddress}}</td>
</tr>
于 2019-03-07T06:26:49.607 回答
0

这是一个古老的问题，但现在有一个明确的答案！ng-repeat-start使用and极大地改进了以角度重复复杂部分的整个过程，ng-repeat-end您可以在此处详细阅读：

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

于 2016-06-29T17:07:41.107 回答