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

Question

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

这个硬编码代码工作正常。

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

如果屏幕宽度已满，我需要做哪些更改才能使产品并排显示在下一行。

Answer 1

修复原始问题

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