I am trying to customize an ng-repeat
to add something like a br
tag to every 4th element. I have tried searching around but cannot seem to find a solid answer. Is there a simple way to add conditions to Angular for something like this? my ng-repeat
is just adding some spans
with content in them, but I need to start a new line every 4th element.
i.e. I want the following
item1 item2 item3 item4
item5 item6 item7 item8
but right now it just does this
item1 item2 item3 item4 item5 item6 item7 item8
If there are any good articles relating to ng-repeat
customization (for newbies) I would be thankful for links as well as everything I have found thus far is too difficult to understand.
HTML
<div class="section">
<div ng-repeat="items in MyList">
<img ng-click="AddPoint($index)" src={{items.image}} />
<span>{{items.currentPoint}}/{{items.endPoint}}</span>
</div>
</div>
But ng-repeat is not the right thing to use when you have large datasets as it involves heavy DOM manipulations. And you should consider using ng-repeat with pagination. You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.
AngularJS ng-repeat Directive The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object.
Each ng-repeat creates a child scope with the passed data, and also adds an additional $index variable in that scope. So what you need to do is reach up to the parent scope, and use that $index . Save this answer.
NEST TWO ng-repeatThe first ng-repeat in the tr tag will create the rows and the second one in the td tag will create one column per element in the collection. By using one ng-repeat for the row and an other for the column, the rows and the columns of your table is now driven by a subset.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With