javascript - ng-if/ng-repeat是否可以模数？

我正在尝试使用Angular ng-repeat创建一个在每个<div>中带有3 <li>的轮播。我可以轻松地用每张幻灯片1 div来创建它，但是却无法获得3。使用js，我通常会使用模数(％)来确定索引是否可以被3整除，然后打开/关闭li那里。

这可能与Angular有关吗？

这就是我所拥有的(每张幻灯片1个项目):

<ul carousel class="carousel">
  <li class="slide" ng-repeat="item in item.list.items" ng-init="itemIndex = $index">
    <div class="item">{{item}}</div>
  </li>
</ul>

这是我想要实现的目标(每张幻灯片3个项目):

<ul class="carousel">

  <!-- slide 1, with 3 items -->
  <li class="slide">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </li>

  <!-- slide 2, with 3 items -->
  <li class="slide">
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
  </li>

  <!-- and so on... -->
</ul>

编辑

伊瑟伍德(Isherwood)将此问题标记为重复。这个问题非常清楚地询问有关在ng-if而不是 Controller 中使用模数的问题。建议的副本很接近，但是Betty St用代码示例和链接回答了下面的确切问题。谢谢贝蒂!

最佳答案

您可以使用%或groupBy。我总是按此处所述使用模数:https://stackoverflow.com/a/25838091/595152

您的解决方案应如下所示:

<ul carousel class="carousel">
  <li class="slide" ng-repeat="_ in item.list.items" ng-if="$index % 3 == 0">
    <div class="item" ng-repeat="i in [$index, $index + 1, $index + 2]" ng-init="item = item.list.items[i]">
      <div ng-if="item">{{item}}</div>
    </div>
  </li>
</ul>

您需要在div内添加一个带有ng-if的div.item，以确保该项存在；)