使用NG-重复与表行 [英] Using ng-repeat with table rows

问题描述

我试图从模型到模板中插入数据，但我想，每7次后添加一个新表行。基于strign模板，我可以很容易就使用迭代指数和模，但我不能完全弄清楚如何采用了棱角分明的DOM模板做这个事情。

I'm trying to insert data from a model into a template but I want to add a new table row after every 7 repetitions. With strign-based templates I could do it quite easily using the iteration index and modulo but I can't quite figure out how to do this using angular's DOM templates.

这里是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它是这样的：

And the javascript it something like:

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的code： http://jsfiddle.net/3zhbB/2/

You can view the code in a JSFiddle here: http://jsfiddle.net/3zhbB/2/

推荐答案

请 $ scope.dates 数组与天阵列。

内的是一排，每一天的行的阵列内每个阵列是一个天

Each array inside of it is a row, and each day inside of the row's array is a day

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

See this updated JSFiddle http://jsfiddle.net/6aqtj/1/

这篇关于使用NG-重复与表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！