javascript - 为什么angularJS循环渲染新行中的框

我有些产品想要像这样并排展示。


这种硬编码的代码可以正常工作。

<div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>

但是当我试图通过angularJS循环实现相同的目的时。

<div ng-repeat="product in Products">
    <div class="box">
        //i will fill the details here.
    </div>
</div>

我得到了这个结果。


这是我的CSS类。

.box {
padding : 5px;
display : inline-block;
min-width: 100px;
min-height: 50px;
background-color: red;
}

如果屏幕宽度已满，我需要做些什么更改，以便产品可以并排显示并在下一行显示。

最佳答案

解决原始问题

您的ng-repeat应该在<div class="box">上

<div>
    <div ng-repeat="product in Products" class="box">
        //i will fill the details here.
    </div>
</div>

错误描述

这样，您将为每个<div class="box">创建一个重复的新product in Products。

之前的操作方式意味着您要为每个product in Products创建一个新的容器元素。

容易犯的错误。

修复CSS样式

为了实现您在OP中显示的样式，您将需要为重复的元素添加边距，也要在它们之间添加一些间距。
为此，请更改：

.box {
    padding : 5px;
    display : inline-block;
    min-width: 100px;
    min-height: 50px;
    background-color: red;
}

至

.box {
    margin-right : 5px;
    display : inline-block;
    min-width: 100px;
    min-height: 50px;
    background-color: red;
}

关于javascript - 为什么angularJS循环渲染新行中的框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29395975/