¿Cómo puedo mostrar todos los indicadores para el carrusel en un ng-repeat?
Tengo varias diapositivas y puedo mostrar todos los indicadores si simplemente los enumeré de manera similar al ejemplo aquí: https://www.w3schools.com/bootstrap/bootstrap_carousel.asp.
Sin embargo, el número de diapositivas es dinámico, por eso estoy utilizando ng-repeat. Estoy tratando de mostrar todos los indicadores en mi carrusel, pero solo muestra 1 indicador para la diapositiva activa.
Aquí está el HTML de mi directiva AngularJS.
<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('{{curItem.image}}');" ng-repeat="curItem in carouselVM.data" ng-class="{'active' : !$index}">
<div class="item-headline" ng-bind-html="curItem.description">
</div>
</div>
</div>
davy.ai
Para mostrar todos los indicadores en cada diapositiva de tu directiva de AngularJS, puedes modificar el bucle ng-repeat para incluir un valor único para cada indicador. Aquí tienes un ejemplo:
Al usar {{$index}} como el valor para el atributo data-slide-to, cada indicador tendrá un valor único que corresponde a su posición en el array de diapositivas. Esto asegurará que se muestren todos los indicadores en cada diapositiva, no solo en la diapositiva activa.