Dynamic Bootstrap Carousel 3项目为Active

Question

我正在尝试在角度js中创建一个动态旋转木马，并希望每张幻灯片中有3个项目。问题是前3个项目应该包含在“活动”类中，而3个组中的所有下一个项应该包含在“item”类中。我尝试使用JQuery，但它没有给我预期的行为。

使用ng-repeat的HTML代码

<div class='col-md-8'>
    <div class="carousel slide media-carousel" id="media">
        <div class="carousel-inner">
            <div class="item" ng-repeat="item in items">
                <div id="id" class="col-md-4">
                    <a class="cards">
                        <img ng-src="{{:: item.imageUrl}}" />
                     </a>
                </div>
            </div>
        </div>
        <button data-slide="prev" ng-show="items.length > 3" class="left carousel-control" ng-click="shiftLeft()"></button>
        <button data-slide="next" ng-show="items.length > 3" class="right carousel-control" ng-click="shiftRight()"></button>
    </div>
</div>

我希望代码看起来像这样（预期代码的静态表示）。

       <div class="carousel-inner">
            <div class="item  active">
                <div class="col-md-4">
                    <a class="cards"><img alt="" src="img1"></a>
                </div>
                <div class="col-md-4">
                    <a class="cards"><img alt="" src="img2"></a>
                </div>
                <div class="col-md-4">
                    <a class="cards"><img alt="" src="img3"></a>
                </div>
            </div>
            <div class="item">
                <div class="col-md-4">
                    <a class="cards"><img alt="" src="img4"></a>
                </div>
                <div class="col-md-4">
                    <a class="cards"><img alt="" src="img5"></a>
                </div>
                <div class="col-md-4">
                    <a class="cards"><img alt="" src="img6"></a>
                </div>
            </div>
            <div class="item">
                <div class="col-md-4">
                    <a class="cards"><img alt="" src="img7"></a>
                </div>
                <div class="col-md-4">
                    <a class="cards"><img alt="" src="img8"></a>
                </div>
                <div class="col-md-4">
                    <a class="cards"><img alt="" src="img9"></a>
                </div>
            </div>
        </div>