当我通过 Angularjs 使用 ng-repeat 时，我需要防止对特定 "class" 的迭代。有人能帮我吗？

Question

我在 bootstrap 轮播中使用 angularjs。当我使用这个指令 ==> ng-repeat="album in ActiveSinger.albums" 来遍历我的数组时，它在自己的 div 中不断重复 class "active"，这会导致我的 bootstrap 轮播出现问题。（因为 "active" class 应该只用于第一个项目，它将自动传递给由 bootstrap 处理的剩余项目。所以当 class "active" 通过所有项目时，我的图片将相互堆叠而不是轮播。 note:when 我在浏览器检查工具中删除了 "active" class，它完美运行！！！所以我需要的是防止 angularjs 在我的 "carousel-item" 的其余部分重复这个 "active" class。如果您能帮我解决这个问题，我将不胜感激。

<div class="modal fade" id="SingerAlbum">
<div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
        <div class="modal-body">
            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="carousel-item active" ng-repeat="album in ActiveSinger.albums">
                        <img class="d-block w-100" ng-src="{{album.album_cover}}" alt={{album.slide_number}}>
                    </div>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

Answer 1

您可以在 ng-class 表达式中使用循环变量 $first

<div class="carousel-item" ng-repeat="album in ActiveSinger.albums" ng-class="{active: $first}">
  <img class="d-block w-100" ng-src="{{album.album_cover}}" alt={{album.slide_number}}>
</div>

在ng-repeat and how to use conditions for styles using ng-class

的官方文档中寻找更多的循环变量

当我通过 Angularjs 使用 ng-repeat 时，我需要防止对特定 "class" 的迭代。有人能帮我吗？

I need to prevent iteration over a specific "class" while I use ng-repeat by Angularjs. can someone help me?

javascript

angularjs

angularjs-ng-repeat

bootstrap-carousel