Customize Ng-Repeat in Angularjs for Every Nth Element

Customize ng-repeat in AngularJS for every nth element

You could just use $index and apply it with ng-if on <br ng-if="!($index%4)" />

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

Update

Based on the comment, you just need css for this just clear the float every nth element.

.section > div:nth-of-type(4n+1){
  clear:both;
}

Demo

If you are worried about support for older browsers then just add a class on specific condition:-

 <div ng-repeat="items in offensiveMasteries" ng-class="{wrap:!($index % 4)}">

and a rule for .section > div.wrap

Demo

ng-repeat, show item every nth time for repeated blocks

you can use this, it's correct for all cases, 4, 12, 20, 28 ...:

ng-if="($index+8) % 8 == 4"

Specifc color to each element of ng-repeat

Use ng-style like this:

<div ng-repeat="x in details" ng-style="{ 'border-color': colors[$index] }">
    <p>{{ x.name }}</p>
    <p>{{ x.fcount }}</p>
    <p>{{ x.email }}</p>
    <p>{{ x.contact }}</p>
    <p>{{ x.DOB }}</p>
</div>

Check the working demo: fiddle

How to develop Nth level of nested tabular output by using angular js ng-repeat

You can use this type of a pattern with ng-repeat and ng-include to create a nested grid with an unknown number of nestings.

ng-repeat unknown number of nested elements

---

Related Topics