Как показать или скрыть определенные теги HTML в AngularJS с помощью ng-repeat и ng-if

Question

У меня есть немного HTML-кода начальной загрузки с повторением ng внутри него.

<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>

Теперь дело в том, что я хотел бы закрыть последний </div> после этого мы перебрали 3 элемента. Я также хотел бы начать новый <div class="row"> с этой точки зрения.

Я пытался создать это с ng-if (ng-if: $index + 1 % 3 == 0, index отражает номер индекса итерации в этой точке), но проблема в том, что я могу показывать или скрывать только чистый HTML-контент с этим тегом и без него.

ОБНОВИТЬ

Я почти нашел исправление:

<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>

Если я использую этот код (с добавленным clearfix), все элементы отображаются красиво и аккуратно. Единственная проблема заключается в том, что если я уберу точку '.' это внутри div, это больше не работает. Похоже, вам нужен какой-то контент внутри тегов, чтобы он работал. Есть идеи?

Заранее спасибо!

-Jérémy

Answer 1

Я нашел решение для моей проблемы.

Код:

<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>