AngularJS ng-repeat with bootstrap carousel

Aus*_*ris 17 angularjs

我试图让这个ng-repeat循环与bootstrap轮播一起工作,但是我理解并且目前在其他地方使用轮播的方式是只有一个包含图像的div可以用'active'类标记,并且一个div必须标记为活动,否则轮播失败.如果标记了多个,它也会失败.一个且只有一个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>
Run Code Online (Sandbox Code Playgroud)

Jos*_*sep 42

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

<div class="item" ng-class="{active:!$index}" ng-repeat="photo in photoPath">
Run Code Online (Sandbox Code Playgroud)