如何綁定Angular-ui-bootstrap輪播控件的數據？

Question

我想使用自定義控件來控制輪播圖片，如下所示。

因此，我希望用戶能夠通過轉盤下方的3個大菜單div來控制轉盤的幻燈片。

我正在使用angular-ui-bootstrap輪播，該輪播默認情況下具有控制按鈕（中間的三個小圓圈是白色的（活動的）3個小圓圈，因此我希望它們成為轉盤下方的3個div。

div的樣式已經根據活動幻燈片進行（活動幻燈片將相應的div變為綠色）。 需要發生的是：當用戶單擊div時，輪播會轉到相應的幻燈片。

我的代碼如下

<!--CAROUSEL-->
<div class="carouselwrap">
    <carousel interval="myInterval" class="carousel">
        <slide ng-repeat="slide in slides track by $index" active="slide.active">
            <img ng-src="{{slide.images[0].slider}}" alt="{{slide.images[0].slider}}" >
            <div class="carousel-caption " class="">
                <h1>{{slide.title}}</h1>
                <h4>{{slide.description}}</h4>
            </div>
        </slide>
    </carousel>
</div>

<!-- CONTROLS -->
<section>
    <article  class="col span_1_of_3 promo" ng-repeat="item in slides" ng-class="{active: item.active}">
        <h2>{{item.title}}</h2>
        <p class="promoinfo">
            <span>{{item.description}}</span>
            <span class="prijs">&euro;{{item.price}}</span>
        </p>
    </article>
</section>

Answer 1

您可以使用ng-click屬性觸發大型div ng-click並在ng-click函數的參數（例如ng-click="changeActiveSlide(slide.id)" ）中傳遞幻燈片的ID或索引。 該函數位於Angular控制器中，可以輕松更改所選幻燈片的“活動”屬性。

不要忘記在$scope設置新功能

這里的函數示例如下：

$scope.changeActiveSlide = function(slideId) {
    angular.forEach($scope.slides, function(slide) {
        slide.active = false; //Desactive all slides
        if(slide.id === slideId) {
            slide.active = true; //Active the clicked slide
        }
    });
}