Angularjs 使用ng repeat时一次显示所有图像的引导转盘

我正在尝试向我的Bootstrap3网站添加一个旋转木马。但是，所有图像都同时显示。我这里有参考资料。有什么建议吗

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

---

您可以使用ng类根据$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>

{{image.name}
{{image.description}

我建议使用angular ui引导：这也可以在一张幻灯片中显示所有图像。如果您可以制作JSFIDLE？@BettySt，请参阅我在edit1中的代码。thanks@BettySt，谢谢你建议旋转木马。我得到了解决方案，现在工作得很好。问题是我使用的是一些供应商脚本的旧版本，这会导致循环依赖性错误。供参考（）

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