AngularJS ng-repeat with bootstrap carousel

Question

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>

Josep · Accepted Answer · 2014-09-10 06:57:39Z

47

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

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

edited Sep 10, 2014 at 6:57

answered Sep 10, 2014 at 6:42

Josep

13.1k2 gold badges44 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Shashank Vivek Over a year ago

@Josep: Can you help me in below question: stackoverflow.com/questions/31078842/…

Ali Baig Over a year ago

I couldn't have imagined that it was possible with this one simple line :(

Atula Over a year ago

superb @Josep. Porblem Solved .

Projesh Pal Over a year ago

awesome answer... saved a ton of time

Collectives™ on Stack Overflow

AngularJS ng-repeat with bootstrap carousel

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related