CODEWITHSUNDEEP
htmltwitter-bootstraprepeataurelia
JordanBarber
JordanBarber

Reputation: 2101

Add element outside of Aurelia repeat.for loop based on $index inside of loop

I am using Aurelia and Bootstrap grid. I am looping through some items from the view model, but need to add a clearfix after each 3 items in the grid. Problem is, I need to add this outside of the loop. HTML:

<div class="col-md-4" repeat.for="item of items">
    <div class="inner">
    </div>
</div>

I could do something like this...

<div if.bind="$index = 2" class="clearfix"></div>

But I need it to be outside of the loop. What's the easiest way to do this?

Upvotes: 0

Views: 710

Answers (2)

adiga
adiga

Reputation: 35259

Wrap your col-md-4 divs with a template. Then you can use the % (modulus) operator on an inner template element to only add the clearfix div when needed:

<template repeat.for="item of items">
  <div class="col-md-4">
      <div class="inner">
      </div>
  </div>
  <template if.bind="$index % 3 === 2">
    <div class="clearfix"></div>
  </template>
</template>

Now the clearfix will appear at index 2, 5 etc

Upvotes: 3

Ashley Grant
Ashley Grant

Reputation: 10897

Wrap the outer div in a template element and then put the repeat.for on that template element.

<template repeat.for="item of items">
  <div class="col-md-4">
      <div class="inner">
      </div>
  </div>
  <div if.bind="$index % 3 === 2" class="clearfix"></div>
</template>

Upvotes: 2

Related Questions