CODEWITHSUNDEEP
angularjscssangularjs-scopeangularjs-ng-repeat
Oam Psy
Oam Psy

Reputation: 8663

AngularJS - ng-repeat horizontally x number of times, then new line

I am trying to perform a simple ng-repeat on an <li>. In the past, i have created vertical ng-repeat. I am now trying to create a horizontal one, however, one that displays 4 items, then starts the ng-repeat again on a new line.

The way i have gone about this is using the grid-wrap technique (CSS) found here: http://builtbyboon.com/blog/proportional-grids

So each <li>, has a CSS class/width of one-quarter (25%).

Is this the correct/Angular way of going about it? Or should i be using some kind of $index on the <li> and triggering a <br> when $index == 3 ?

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

Here's my plunkr: http://plnkr.co/edit/REixcir0gL0HGCTvclYN?p=preview

Any other improvements you see feel free to add.

Thanks

Upvotes: 3

Views: 5478

Answers (1)

Niclas Gleesborg
Niclas Gleesborg

Reputation: 566

I did some research and found this answer: 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>

So you could use this:

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

There doesn't seem to be a better way. You probably can't get around using index.

Upvotes: 4

Related Questions