twitter bootstrap - angularjs: ng-repeat over half the length of an array -
i using ngrepeat angularjs fill out grid in bootstrap. grid needs periodic clearfixes.
so, example, if 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 accomplishable ngrepeat? seems 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 clearfixes in there iterator.
angular has index property called $index
when you're inside of ng-repeat
directive. use display clearfix div when needed. if want shortcut more, use $even
or $odd
(in case, $odd
) property display every 2 instances.
combining special ng-repeat-start
, ng-repeat-end
directives, @ required 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>
here's plunker show it's working: plunker
Comments
Post a Comment