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

Question

使用 Angular ng-repeat，我试图创建一个轮播，每个 <div> 有 3 个 <li> s。我可以用每张幻灯片 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 回答了下面的确切问题，并提供了代码示例和链接。谢谢贝蒂!

Answer 1

您可以使用 % 或 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.item 中添加一个带有 ng-if 的 div 以确保该项目存在 ;)