Angular JS - ng-repeat 和循环条件

Posted 2023-03-14

【中文标题】Angular JS - ng-repeat 和循环条件

【英文标题】：Angular JS - ng-repeat and loop conditions

【发布时间】：2014-02-16 14:05:47

【问题描述】：

嘿，我有这段代码：

<div ng-repeat="i in values">
i
</div>

它可以工作，但我想在循环中添加额外的条件，例如：

<div ng-repeat="i in values">
i
if(i !== 0)
<div></div>

</div>

我怎样才能做到这一点？

【参考方案1】：

使用ng-if（或ng-show）：

<div ng-repeat="i in values">
   <div ng-if="i !== 0"></div>
</div>

附加到元素上，这将决定是否显示它。

ng-if can be found here 的文档。

但是，如果您只想在循环第一个或最后一个项目时执行某些操作，您也可以使用ng-repeat 的$first 和$last 属性。这些是documented with ng-repeat。并且可以这样使用：

<div ng-repeat="i in values">
   <div ng-if="$first"></div>
</div>

【讨论】：

ng-if 是比 ng-show 更好的解决方案，因为 ng-if 修改了 DOM。 ng-show 只显示/隐藏元素。

@RaviH 是的，这就是示例使用 ng-if 的原因。但是，根据您要实现的目标，它们都是有效的解决方案。

@DavinTryon 嘿，谢谢你，你知道我怎么能在同一个循环中放置一个增量变量吗？ :P 我想仅在 increment%3 === 0 的情况下在循环内显示一个 div，但我不知道如何:(

@sbaaaang ng-repeat 内置了一个：$index。您还可以使用 $odd 和 $even 来执行交替行之类的操作。

是的，应该这样做。

【参考方案2】：

使用ng-ifstatement

<div ng-repeat="i in values">
   i
   <div ng-if="i !== 0"></div>
</div>