Ionic Rahmen: Erzeugung divs nicht dynamisch arbeiten

Question

Ich versuche, ein Brettspiel mit divs mit AngularJS wie diese dinamically zu generieren:

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

Ich kann nichts mit diesem Code auf dem Bildschirm sehen. Der Controller funktioniert gut und wenn ich die divs nur in der HTML-Datei einfügen, funktioniert es ...

Eine Idee ?? Vielen Dank!

EDIT 1:

Mit diesem Code im HTML funktioniert es gut:

<div class="boardgame"> 
    <div class="square"></div> 
    <div class="square"></div> 
    <div class="square"></div> 
    <div class="square"></div>   
</div> 

Answer 1

Das Problem ist, mit dem CSS-Klasse. Versuchen Sie, die Breite und Höhe der Klasse .boardgame zu entfernen. Und Sie können auch max-width: 100%; in der äußeren Div-Klasse hinzufügen, wenn Sie die Breite des äußeren div festlegen müssen.

Demo hier: codepen link