Using ng-repeat with table rows

Question

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.

Here's the 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> 

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; });​ 

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

Answer 1

Make $scope.dates an array of arrays with the days.

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

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