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

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>

现在的问题是，在我们迭代了 3 个元素之后，我想关闭最后一个 </div>。我也想在这一点上开始一个新的<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 内，它不再起作用了。似乎您需要在标签内添加某种 'content' 才能让它发挥作用。有什么想法吗？

提前致谢！

-杰里米

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

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

html

javascript

angularjs

ng-repeat