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> 

more info: ng-repeat, ng-if

here's plunker show it's working: plunker


Comments

Popular posts from this blog

java - Oracle EBS .ClassNotFoundException: oracle.apps.fnd.formsClient.FormsLauncher.class ERROR -

c# - how to use buttonedit in devexpress gridcontrol -

nvd3.js - angularjs-nvd3-directives setting color in legend as well as in chart elements -