Question

使用Angular ng-repeat，我尝试在每个@Html.TextBoxFor(model => model.Name, new { @readonly = "readonly" })中创建一个3 <div> s的轮播。我可以轻松地创建它，每张幻灯片有1个div，但无法设置3.使用js，我通常使用模数（％）来确定索引是否可以被3整除，然后打开/关闭那里的<li>。

这可以与Angular一起使用吗？

这就是我所拥有的（每张幻灯片1件）：

li

这就是我想要实现的目标（每张幻灯片3件）：

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

修改

此问题被isherwood标记为重复。问题非常清楚地询问在ng-if中使用模数，而不是控制器。建议的副本很接近，但是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内添加ng-if div.item以确保该项目存在;）

Answer 2

查看groupBy过滤器，将项目分为3组。

https://github.com/a8m/angular-filter#groupby

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

2 个答案: