Angular: Empty Fiddle

http://angularjs.org/

by Avi Algaly

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-app="myApp">

<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 ng-repeat="week in (dates.length/7 | array)">
         <td ng-repeat="day in dates.slice(7*$index, 7*$index + 7)">
             {{ day }}
             <!-- After seven iterations a new `<tr>` should be aded -->
        </td>
     </tr>
 </tbody>
 </table>
</div>

</div>

CSS

td, th {
    border: 1px #ccc solid;
}

JavaScript

window.myApp = this.angular.module('myApp', []);

var monthDays = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31];

myApp.controller('MyCtrl', function($scope) {    
    $scope.dates = monthDays;
});

//Inputs a number and outputs an array with that length. 
//(3 | array) => [0,1,2]
myApp.filter('array', function() {
    return function(arrayLength) {
        arrayLength = Math.ceil(arrayLength);
        var arr = new Array(arrayLength), i = 0;
        for (; i < arrayLength; i++) {
            arr[i] = i;
        }
        return arr;
    };
});