0

I'm using angularjs in my bootstrap carousel. when I use this directive ==> ng-repeat="album in ActiveSinger.albums" to iterate over my Array, it keeps repeating class "active" in it's own div,which will cause problem in my bootstrap carousel. (since "active" class should only be used for the first item and it will be passed through remained items automatically which is handled by bootstrap). so when the class "active" is passed through all items ,my pictures gonna stack over each other instead of carouseling. note:when I remove "active" class in browser inspect tool,it perfectly works!!! so what I need is to prevent angularjs repeating this "active" class in rest of my "carousel-item". I would appreciate it in advance if you could help me with this issue.

<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>

mohammad maleki
  • 74
  • 8

1 Answers1

1

You can use loop variable $first in ng-class expression

<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>

Look for more loop variables in the official documentation of ng-repeat and how to use conditions for styles using ng-class

Anton K
  • 176
  • 1
  • 5