AngularJS ng-repeat with bootstrap carousel

时间:2014-09-10 06:39:11

标签: angularjs

我试图让这个ng-repeat循环与bootstrap轮播一起工作,但我理解并且目前正在其他地方使用轮播的方式是只有一个包含图像的div可以标记为' active& #39; class,并且一个div必须标记为active,否则轮播将失败。如果标记了多个,它也会失败。一个且只有一个div可以标记为活动状态。每个其他div都应该标记为' class = item'怎么做我用ng-repeat做到这一点?谢谢。

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

1 个答案:

答案 0 :(得分:42)

然后将第一个标记为活动,如下所示:

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