在引导轮播中的每个项目中指定行号

Question

我正在使用引导轮播，它被划分为项目。 第一项应始终使用活动类，其他仅 class=item。

我正在请求数据，并使用 angularjs 获得响应，尝试用 ng-repeat 填充项目

现在我的问题是第一项应该是 class=item active，并且只有 4 行。 其他项目应该是 class=item 并且每个项目只有 4 行。

请求响应的行数超过 70 行。我被困在这里，我如何将第一个活动班级中的 70 行分成 4 行，其余的在其他项目中（每个项目 4 行）

轮播代码：

<div id="myCarousel" class="carousel slide">


    <div class="carousel-inner">
        <div class="item active">
            <div class="row">
                <div class="col-sm-3"><a href="#x"><img src="images/restaurants/kababji.jpg" alt="Image" class="img-responsive"><Br><center>Kababji</center></a>
                </div>
                <div class="col-sm-3"><a href="#x"><img src="images/restaurants/alsaniour.jpg" alt="Image" class="img-responsive"><Br><center>Al Saniour</center></a>
                </div>
                <div class="col-sm-3"><a href="#x"><img src="images/restaurants/pizzahut.jpg" alt="Image" class="img-responsive"><Br><center>Pizza Hut</center></a>
                </div>
                <div class="col-sm-3"><a href="#x"><img src="images/restaurants/tabliyetmassaad.jpg" alt="Image" class="img-responsive"><Br><center>Tabiliyet Massaad</center></a>
                </div>
            </div>

        </div>

        <div class="item">
        <div class="row">
                <div class="col-sm-3"><a href="#x"><img src="images/restaurants/burgerking.png" alt="Image" class="img-responsive"><Br><center>Burger King</center></a>
                </div>
                <div class="col-sm-3"><a href="#x"><img src="images/restaurants/malektaouk.jpg" alt="Image" class="img-responsive"><Br><center>Malek Taouk</center></a>
                </div>
                <div class="col-sm-3"><a href="#x"><img src="images/restaurants/pizzahut.jpg" alt="Image" class="img-responsive"><Br><center>Pizza Hut</center></a>
                </div>
                <div class="col-sm-3"><a href="#x"><img src="images/restaurants/tabliyetmassaad.jpg" alt="Image" class="img-responsive"><Br><center>Tabiliyet Massaad</center></a>
                </div>
            </div>

        </div>

    </div>

Answer 1

由于您需要在一个轮播项目中显示 4 个响应数组项，因此您可以使用 ng-repeat 循环遍历响应数组并仅显示那些索引完全可被 4 整除的项目。例如，数组中有 20 个项目你想循环通过。你可以在你的ng-repeat 中使用ng-if 放置一个条件，以仅显示第 0、第 4、第 8 等。项目，即($index % 4 == 0)，在里面你可以显示第 0、第 1、第 2第一行的第 3 项，第 2 行的第 4、5、6 和 7 项……以此类推..

这里有一个fiddle 演示了相同的内容。