I'm currently working on dynamically generating a board game using divs in AngularJS, like so:
HTML:
<div class="boardgame" ng-repeat="square in board">
<div class="square"></div>
</div>
JS:
$scope.board = [
{value:"0"}, {value:"0"},
{value:"0"}, {value:"0"},
];
CSS:
.boardgame {
width: 1500px;
height: 1500px;
}
.square {
width: 100px;
height: 100px;
outline: 1px solid;
float: left;
}
For some reason, I am not able to see anything on the screen with this code... The controller seems to be functioning correctly and when I manually insert the divs in the HTML file, it works as expected...
Any thoughts or suggestions? Thank you!
EDIT 1:
Interestingly, when I hardcode the div elements in the HTML like this, it works perfectly:
<div class="boardgame">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>