当我使用 ng-repeat 时，引导轮播一次显示所有图像答案

【问题标题】：Bootstrap Carousel showing all images at once when i use ng-repeat当我使用 ng-repeat 时，引导轮播一次显示所有图像
【发布时间】：2015-11-10 18:57:29
【问题描述】：

我正在尝试将轮播添加到我的 Bootstrap 3 网站。但是，所有图像都同时显示。我从这里引用了w3schools。请问有什么建议吗？

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

这有什么问题吗？ class="$index == 0 ? 'active' : ''"

注意：我使用的是 3.3.5 版的 bootstrap.min.js, bootstrap.min.css 和 1.11.3 版的 jquery.min.js。

编辑 1：我也试过这个（http://angular-ui.github.io/bootstrap/#/carousel），但我仍然面临同样的问题。所有图片都同时显示。

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

【问题讨论】：

我推荐使用 angular-ui 引导程序：angular-ui.github.io/bootstrap/#/carousel
在单张幻灯片中显示所有图像
你能做一个jsfiddle吗？
@BettySt，请在 edit1 中查看我的代码。谢谢
@BettySt，感谢您推荐轮播。我得到了解决方案，现在工作正常。问题是我使用的是某些供应商脚本的旧版本，这会导致循环依赖错误。仅供参考 (stackoverflow.com/questions/33845522/…)

标签： angularjs html twitter-bootstrap carousel

【解决方案1】：

可以使用ng-class根据$index的值动态设置CSS类，根据需要设置类。

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

【讨论】：