AngularJS - 根据 ng-repeat 中的索引不同的 HTML答案

【问题标题】：AngularJS - Different HTML according to index in ng-repeatAngularJS - 根据 ng-repeat 中的索引不同的 HTML
【发布时间】：2015-05-27 14:03:03
【问题描述】：

根据当前索引，在 ng-repeat 中更改 HTML 的最佳方法是什么？我想输出两个垂直填充容器的 div，第三个 div 将填充一半，在第四个 div 的顶部填充另一半。重复下一个元素。下图中的示例：

我想通过执行{{$index = $index + 1}} 来增加ng-repeat 中的$index，评估ng-if 中的$index 以查看它是否是所需的值。但我无法以这种方式增加索引（当我打印它时，它显示为 33、34、35 ......等）。提前致谢。

编辑：

就目前而言，我忘了添加一个小细节。数字 3 和 4，或 7 和 8 需要打印在同一个 ng-repeat 中。这是一个轮播（slick-js），那些半 div 需要在轮播中的同一个“幻灯片”中。唯一的办法就是同时打印，也就是$index和$index+1，否则就当做不同的幻灯片了。

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

这是一个有效的plunker

你可以使用这个语法：

<div ng-repeat="div in divs" ng-class="{'up' : $index % 4 === 3, 'down': $index % 4 === 2}">{{div}} = {{$index}}</div>

按 4 个元素分组 ng-class 将在每 3 个添加类“up”，在每个 4 个添加“down”类

编辑：

像这样在所有幻灯片中使用新数组怎么样：

 //you'll need to build it
 $scope.slideArray = [1,2,[3,4],5,6,7];

并像这样显示它：

<div ng-repeat="slide in slideArray">
    <div ng-repeat="subSlide in slide">
       {{subSlide}}
    </div>
</div>

使用一些好的 CSS 并根据您的需要进行调整应该可以解决问题

【讨论】：

谢谢，我编辑了我的问题，因为我忘记了一个小细节。 half-divs需要打印在同一个ng-repeat中，即我需要在同一个ng-repeat迭代中同时访问当前的$index和$index+1。
@LuísFerreira 编辑了我的答案
谢谢，我一会儿试试：）

【解决方案2】：

也许你可以根据你想要渲染多少个 div 的要求来维护一个数字数组。在ng-repeat 内部使用$index 获取数组项的值并相应地渲染divs。

例如：

$scope.items = [];
$scope.divsToRender = [1,1,2,1,1,2];

<div ng-repeat="item in items">
 //Here use divsToRender[$index] and get the number of divs to render based on current index
</div>

【讨论】：

谢谢，我编辑了我的问题，因为我忘记了一个小细节。 half-divs需要打印在同一个ng-repeat中，即我需要在同一个ng-repeat迭代中同时访问当前的$index和$index+1。

【解决方案3】：

$index 将为您提供ng-repeat 中当前项目的索引。您可以在 ng-if 中使用它。它是从零开始的。在您的示例中，您的 ng-if 可能是这样的：

<ng-if="$index == 2 || $index == 3 || $index == 6 || $index == 7">

【讨论】：

谢谢，我编辑了我的问题，因为我忘记了一个小细节。 half-divs需要打印在同一个ng-repeat中，即我需要在同一个ng-repeat迭代中同时访问当前的$index和$index+1。