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

【问题标题】：How to show or hide certain HTML tags in AngularJS with ng-repeat and ng-if如何使用 ng-repeat 和 ng-if 在 AngularJS 中显示或隐藏某些 HTML 标签
【发布时间】：2016-11-06 20:25:15
【问题描述】：

我有一些引导 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里面，它不再起作用了。似乎您需要在标签中添加某种“内容”才能使其正常工作。有什么想法吗？

提前致谢！

-杰里米

【问题讨论】：

标签： javascript html angularjs ng-repeat

【解决方案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>

【讨论】：