AngularJS - ng - 水平重複x次，然後換行

我正在嘗試在<li>上執行簡單的ng-repeat。在過去，我創建了垂直ng-repeat。我現在試圖創建一個水平的，然而，一個顯示4個項目，然後再開始一個新行ng-repeat。AngularJS - ng - 水平重複x次，然後換行

的路上我去了這個用在這裏找到了電網包裝技術（CSS）：http://builtbyboon.com/blog/proportional-grids

所以每個<li>，有四分之一（25％）的CSS類/寬度。

這是正確的/角度的方式嗎？或者我應該在<li>上使用某種$index，並在$index == 3時觸發<br>？

HTML：

<div ng-controller="MainCtrl"> 
    <ul class="grid-wrap one-whole"> 
     <li ng-repeat="product in Products" class="grid-col one-quarter"> 
      <div class="product-container"> 
       <div>{{ product.ModelNo }}</div> 
       <img ng-src="{{product.ImgURL}}" width="80%"/> 
       <div>${{ product.Price }}</div> 
      </div> 
     </li> 
    </ul> 
</div>

CSS：

.grid-wrap { 
    margin-left: -3em; 
    /* the same as your gutter */ 
    overflow: hidden; 
    clear: both; 
} 
.grid-col { 
    float: left; 
    padding-left: 3em; 
    /* this is your gutter between columns */ 
    width: 100%; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
.one-quarter { 
    width: 25%; 
}

這裏是我的plunkr：http://plnkr.co/edit/REixcir0gL0HGCTvclYN?p=preview

你看到隨意添加任何其他改進。

感謝

來源

2014-10-06 Oam Psy

我做了一些研究，發現這個答案： Customize ng-repeat in AngularJS for every nth element

<div class="section"> 
<div ng-repeat="items in MyList"> 
    <img ng-click="AddPoint($index)" src={{items.image}} /> 
    <span>{{items.currentPoint}}/{{items.endPoint}}</span> 
    <br ng-if="!(($index + 1) % 4)" /> 
</div>

所以，你可以這樣做：

<br ng-if="!(($index + 1) % 4)" />

似乎沒有給是更好的方法。你可能無法繞過使用索引。

來源

2014-10-06 10:26:00 Niclassg

AngularJS - ng - 水平重複x次，然後換行

回答

相關問題