How to show or hide certain HTML tags in AngularJS with ng-repeat and ng-if

Question

I have a bit of bootstrap HTML code with an ng-repeat inside of it.

<div class="row">
  <div class="col-lg-4" ng-repeat="p in persons">
    <img class="img-circle" src="images/{{ p.image }}" width="140" height="140">
    <h2>{{ p.name }}</h2>
    <p>{{ p.description }}</p>
    <p><a class="btn btn-default" href="#/quotes/{{ p._id }}" role="button">Quotes &raquo;</a></p>
  </div>
</div>

Now the thing is that I would like to close the last </div> after that we iterated through 3 elements. I also would like to start a new <div class="row"> at this point.

I tried to create this with an ng-if ( ng-if: $index + 1 % 3 == 0 , index reflects on the index number of the iteration at that point), but the issue is that I can only show or hide pure HTML content with this and no tags.

UPDATE

I almost found a fix:

<div class="row">
  <div ng-repeat="p in persons">
    <div class="col-lg-4">
      <img class="img-circle" src="images/{{ p.image }}" width="140" height="140">
      <h2>{{ p.name }}</h2>
      <p>{{ p.description }}</p>
      <p><a class="btn btn-default" href="#/quotes/{{ p._id }}" role="button">Quotes &raquo;</a></p>
    </div>
    <div class="clearfix visible-lg-block" ng-if="($index+1)%3==0">.</div>
  </div>
</div>

If I use this code (with the clearfix added), all the elements are displayed nice and neat. The only issue is that if I remove the dot '.' that is inside the div, it doesn't work anymore. It seems like you need some kind of 'content' inside the tags to let it work. Any ideas?

Thanks in advance!

-Jérémy

Answer 1

I found the fix for my problem.

Code:

<div class="row">
  <div ng-repeat="p in persons">
    <div class="col-lg-4">
      <img class="img-circle" src="images/{{ p.image }}" width="140" height="140">
      <h2>{{ p.name }}</h2>
      <p>{{ p.description }}</p>
      <p><a class="btn btn-default" href="#/quotes/{{ p._id }}" role="button">Quotes &raquo;</a></p>
    </div>
    <div class="clearfix visible-lg-block" ng-if="($index+1)%3==0"></div>
  </div>
</div>