Bootstrap Carousel showing all images at once when i use ng-repeat

问题

I'm trying to add a carousel to my Bootstrap 3 website. But, All images are showing at once. I've reference from here w3schools. Any suggestion please?

<div class="container" ng-show="hasImages">
    <br>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators" ng-repeat="image in images">
            <li data-target="#myCarousel" data-slide-to="$index" class="$index  == 0 ? 'active' : ''"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox" ng-repeat="image in images">
            <div class="$index  == 0 ? 'item active' : 'item'">
                <img bn-lazy-src="{{image.fullPath}}" title="{{image.description}}" alt="missing" />
                <div class="carousel-caption">
                    <h3>{{image.name}}</h3>
                    <p>{{image.description}}</p>
                </div>
            </div>
        </div>

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

Any problem with this? class="$index == 0 ? 'active' : ''"

Note: I'm using bootstrap.min.js, bootstrap.min.css of version 3.3.5 and jquery.min.js of version 1.11.3.

EDIT 1: I also tried this(http://angular-ui.github.io/bootstrap/#/carousel), Still i am facing same problem. All images are showing at once.

<div style="height: 305px">
    <uib-carousel interval="5000" no-wrap="false">
        <uib-slide ng-repeat="subCategorySlideShowImage in subCategorySlideShowImages" active="subCategorySlideShowImage.active">
            <img ng-src="{{subCategorySlideShowImage.fullPath}}" style="margin:auto;">
            <div class="carousel-caption">
                <h4>Slide {{$index}}</h4>
                <p>{{subCategorySlideShowImage.text}}</p>
            </div>
        </uib-slide>
    </uib-carousel>
</div>

回答1:

You can use ng-class dynamically set CSS classes based on the value of $index and set the class as required.

<div class="container" ng-show="hasImages">
    <br>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators" ng-repeat="image in images">
            <li data-target="#myCarousel" data-slide-to="$index" ng-class="{'active': $index == 0}"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox" ng-repeat="image in images">
            <div class="item" ng-class="{'active': $index == 0}">
                <img bn-lazy-src="{{image.fullPath}}" title="{{image.description}}" alt="missing" />
                <div class="carousel-caption">
                    <h3>{{image.name}}</h3>
                    <p>{{image.description}}</p>
                </div>
            </div>
        </div>

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

来源：https://stackoverflow.com/questions/33637458/bootstrap-carousel-showing-all-images-at-once-when-i-use-ng-repeat

标签

angularjs

html5

twitter-bootstrap

carousel