Question

我有一些bootstrap HTML代码，里面有ng-repeat。

<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来创建它，索引反映了那时迭代的索引号），但问题是我只能显示或隐藏纯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>

如何使用ng-repeat和ng-if在AngularJS中显示或隐藏某些HTML标记

1 个答案: