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

Posted 2023-05-08

【中文标题】如何在 ng-repeat 中显示轮播的所有指标？

【英文标题】：How do I show all indicators for carousel in an 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>

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

【参考方案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>