AngularJS Templae

Basic JSFiddle for AngularJS 1.2.1. Already contains the ngApp, ngController, data and method binding.

by Luis Perez

HTML

<div ng-controller="MinesweeperController">
    <table class="minefield">
        <tr ng-repeat="row in minefield.rows">
            <td ng-repeat="spot in row.spots" ng-click="spot.isCovered = false">
                <img ng-if="spot.isCovered" src="http://luis-perez.s3-us-west-2.amazonaws.com/angularjs-minesweeper-game/covered.png" />
                <img ng-if="!spot.isCovered" src="http://luis-perez.s3-us-west-2.amazonaws.com/angularjs-minesweeper-game/empty.png" />
            </td>
        </tr>
    </table>
</div>

CSS

.minefield {
    line-height:0;
    border-spacing:0;
}

.minefield td {
    padding:0
}

JavaScript

function createMinefield() {
    var minefield = {};
    minefield.rows = [];
    
    for(var i = 0; i < 9; i++) {
        var row = {};
        row.spots = [];
        
        for(var j = 0; j < 9; j++) {
            var spot = {};
            spot.isCovered = true;
            row.spots.push(spot);
        }
        
        minefield.rows.push(row);
    }
    
    return minefield;
}

function MinesweeperController($scope) {
    $scope.minefield = createMinefield();
}