javascript - 如何数据绑定(bind) 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 属性并在 ng-click 函数的参数中传递幻灯片的 ID 或索引来触发对大 div 的点击(例如: ng-click="changeActiveSlide(slide.id)")。 位于 Angular Controller 中的函数，可以轻松更改所选幻灯片的“事件”属性。

不要忘记在 $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
        }
    });
}