angularjs: ng-repeat over half the length of an array

Question

I am using ngRepeat angularjs to fill out 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 accomplishable with ngRepeat? It seems that 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 the clearfixes in there with the iterator.

I think you should move the `ng-repeat` code into the `.row` `div` — Simon H, Nov 19 '14 at 16:53
Have you checked out this post for some answers - http://stackoverflow.com/questions/16824853/way-to-ng-repeat-defined-number-of-times-instead-of-repeating-over-array — FrailWords, Nov 19 '14 at 17:00

entropic · Answer 1 · 2014-11-19T17:20:21.153

Angular has an index property called $index when you're inside of the ng-repeat directive. You could use this to display your clearfix div when it is needed. If you want to shortcut it even more, you could use the $even or $odd (in your case, $odd) property to display it every two instances.

Combining the special ng-repeat-start and ng-repeat-end directives, you could do something like this to get at your 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 a Plunker to show it's working: PLUNKER

angularjs: ng-repeat over half the length of an array

1 Answers1