如何在 ng-repeat 中显示轮播的所有指标？答案

【问题标题】：How do I show all indicators for carousel in an ng-repeat?如何在 ng-repeat 中显示轮播的所有指标？
【发布时间】：2022-01-23 00:58:23
【问题描述】：

我有几张幻灯片，如果我像下面的示例一样简单地列举它们，我就能显示所有指标：https://www.w3schools.com/bootstrap/bootstrap_carousel.asp。

但是，幻灯片的数量是动态的，这就是我使用 ng-repeat 的原因。我正在尝试显示轮播中的所有指示器，但它只显示活动幻灯片的 1 个指示器。

这是我的 AngularJS 指令的 HTML。

<div class="container slide" id="myCarousel" data-interval="{{carouselVM.interval }}" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators" ng-repeat="curItem in carouselVM.data">
        <li data-target="#myCarousel" data-slide-to="$index" ng-class="{'active': $index == 0}"></li>
    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item" style="background-image: url(&quot;{{curItem.image}}&quot;);" ng-repeat="curItem in carouselVM.data" ng-class="{'active' : !$index}">
            <div class="item-headline" ng-bind-html="curItem.description">
            </div>
        </div>
    </div>

    <!-- Left and right controls -->
    <a class="left switch-button" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left fa fa-angle-left"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right switch-button" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right fa fa-angle-right"></span>
        <span class="sr-only">Next</span>
    </a><br>
</div>

如何在每张幻灯片上显示所有指标？

【问题讨论】：

标签： angularjs carousel bootstrap-carousel

【解决方案1】：

我得到了我需要的东西。 ng-repeat 需要发生在 <li> 而不是 <ol>。

<div class="container slide" id="myCarousel" data-interval="{{carouselVM.interval }}" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="$index" ng-class="{'active': $index == 0}" ng-repeat="curItem in carouselVM.data"> </li>
    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item" style="background-image: url(&quot;{{curItem.image}}&quot;);" ng-repeat="curItem in carouselVM.data" ng-class="{'active' : !$index}">
            <div class="item-headline" ng-bind-html="curItem.description">
            </div>
        </div>
    </div>

    <!-- Left and right controls -->
    <a class="left switch-button" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left fa fa-angle-left"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right switch-button" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right fa fa-angle-right"></span>
        <span class="sr-only">Next</span>
    </a><br>
</div>

【讨论】：