AngularJS - ng-repeat horizontally x number of times then newline

I am trying to accomplish simple ng-repeat

on <li>

. In the past, I created a vertical one ng-repeat

. Now I'm trying to create a horizontal that displays 4 items and then starts again ng-repeat

on a new line.

The way I did it was using the grid-wrap (CSS) method found here:

So each <li>

has a CSS class / width of one quarter (25%).

Is this the correct / Angular way to get around this? Or should I use some kind of $index

on <li>

and run a <br>

when $index == 3



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



.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%;


Here's my plunkr:

Any other improvements you see feel free to add.



source to share

1 answer

I did some research and found this answer: Set up 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}} />
  <br ng-if="!(($index + 1) % 4)" />


So, you can use this:

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


There seems to be no better way. You probably can't get by with an index.



All Articles