Angularjs: ng-repeat more than half the length of an array
I am using angularjs ngRepeat to fill a grid in bootstrap. The grid needs periodic clearfixes.
So, for example, if the grid is:
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
foo bar
</div>
<div class="col-md-4 col-sm-6">
foo bar
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-md-4 col-sm-6">
foo bar
</div>
<div class="clearfix visible-md-block"></div>
<div class="col-md-4 col-sm-6">
foo bar
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-md-4 col-sm-6">
foo bar
</div>
<div class="col-md-4 col-sm-6">
foo bar
</div>
</div>
</div>
Is this achieved using ngRepeat? It seems like a structure like:
<div class="container">
<div class="row">
<div data-ng-repeat="i in [0,1,2,3,4,5]" class="col-md-4 col-sm-6">
foo bar
</div>
</div>
</div>
Couldn't get clearfixes in there with an iterator.
source to share
Angular has an index property called $index
when you are inside a directive ng-repeat
. You can use this to display your clearfix div when needed. If you want to shorten it even further, you can use a property $even
or $odd
(in your case, $odd
) to display it every two instances.
By combining special directives ng-repeat-start
and ng-repeat-end
, you can do something like this to get the desired result:
<div class="container">
<div class="row">
<div ng-repeat-start="i in [0,1,2,3,4,5]" class="col-md-4 col-sm-6">
foo bar
</div>
<div ng-repeat-end ng-if="$odd" class="clearfix visible-sm-block"></div>
</div>
</div>
Additional information: ng-repeat
,ng-if
Here's Plunker showing it works: PLUNKER
source to share