CODEWITHSUNDEEP
angularjs
Austin Harris
Austin Harris

Reputation: 5410

AngularJS ng-repeat with bootstrap carousel

I am trying to get this ng-repeat loop to work with the bootstrap carousel, but the way I understand and am currently using the carousel elsewhere is that only one div containing an image can be marked with the 'active' class, and one div must be marked with active otherwise the carousel fails. It also fails if more than one is marked. One and only one div can be marked active. Every other div should just be marked 'class=item' How to do I make that happen with ng-repeat? Thank you.

<div class="carousel" id="slider" style="margin-left: 20px;">

    <label class="labelSecurity">Incident Photos</label><br />

    <div class="carousel-inner">
        <div class="item active" ng-repeat="photo in photoPath">
            <img src="{{ photo.path }}" class="img-responsive">
        </div>
    </div>

    <a class="carousel-control right" href="#slider" data-slide="next"></a>

</div>

Upvotes: 18

Views: 18122

Answers (1)

Josep
Josep

Reputation: 13071

Then just mark the first one as active, like this:

<div class="item" ng-class="{active:!$index}" ng-repeat="photo in photoPath">

Upvotes: 47

Related Questions