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

Question

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

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

编辑：

目前，我忘了添加一个小细节。数字3和4，或7和8需要在相同的ng-repeat中打印。这是一个旋转木马（slick-js），那些半div需要在旋转木马的同一个“幻灯片”中。唯一的方法是同时打印它们，即$index和$index+1，否则它们将被视为不同的幻灯片。

Answer 1

可能您可以根据您要渲染的div数量的要求维护一组数字。使用ng-repeat在$index内获取数组项的值并相应地呈现divs。

E.g：

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

Answer 2

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

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

Answer 3

这是一个有效的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并根据您的需要对其进行操作应该可以做到这一点