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]

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