Question

我正试图用这样的angularJs生成一个divs dinmaically的棋盘游戏：

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

我在这个代码的屏幕上看不到任何内容。控制器工作正常，如果我只在HTML文件中插入div，它可以工作......

有些想法？谢谢！

编辑1：

在HTML中使用此代码可以正常工作：

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

Answer 1

问题在于你的CSS课程。尝试删除.boardgame类的宽度和高度。并且，如果必须设置外部div的宽度，还可以在外部div类中添加max-width: 100%;。

在这里演示：codepen link

离子框架：动态生成div不起作用

1 个答案: