爲什麼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; 
}