在angular-ui-bootstrap轮播上设置活动幻灯片

Question

我正在使用角度,引导程序和一个名为"ui-bootstrap"的插件来制作旋转木马.

我有一个缩略图列表,当点击一个模式时,会在旋转木马内显示高清晰度的图像,类似于您在亚马逊或其他网站上的图像.我试图将旋转木马中第一个显示的图像设置为用户点击的图像.

我已经能够使用$ index获取图像的索引,因为我在ng-repeat中,将它提供给模态控制器并显示轮播没有问题.但第一个图像我总是索引0,即使我尝试设置我拥有的索引.

这些是我尝试的一些事情:

    $scope.SliderItems = items; // This one sets the items in the slider array

    items[selectedIndex].active = true;
    $scope.SliderItems[selectedIndex].active = true;
    $scope.SliderItems.select(SliderItems[selectedIndex]);

我还试图在一个属性上设置它,在显示它所需的项目上将"active"属性设置为true但是然后它被阻止在该项目上,导致旋转木马崩溃.此外,尝试了旋转木马元素上的"data-slide-to"属性但没有成功.

    $scope.SelectedIndex = selectedIndex;

所以我不知道使用哪个属性/方法来执行此操作,插件页面上的文档也没有给我更多的指示:(

http://angular-ui.github.io/bootstrap/

有谁知道如何设置默认的活动幻灯片？甚至如何在加载它之后设置它,因为在底部有一个带缩略图的旋转木马,你可以点击它来显示主图像或其他东西.

谢谢.

解决了

我之前尝试做过这样的事情并且没有以某种方式工作,但是这次我尝试使用不同的方法再次尝试.因此,在Controller上设置.active = true后,这是HTML:

    <carousel>
        <slide ng-repeat="item in SliderItems" active="item.active">
            ...
        </slide>
    </carousel>

以防万一,控制器:

    $scope.SliderItems = items; // items comes from another controller with the items
    $scope.SliderItems[selectedIndex].active = true; //selectedIndex also comes from the other controller

Answer 1

active该uib-carousel元素有一个指令:

<uib-carousel interval="5000" active="vm.active">
  <uib-slide ng-repeat="slide in vm.slides track by $index" index="$index">
       <img...
  </uib-slide>
</uib-carousel>

您可以通过将所需幻灯片的$ index分配给活动参数来设置活动幻灯片:

<a ng-click="vm.active=3">Make slide 3 active</a>

AngularUI监视"活动"字段,并将创建到所选幻灯片的平滑过渡.

我相信这种行为是最近的,并取代了从旧版本设置活动属性.

Answer 2

Bootstrap 允许您指定默认情况active下item必须显示为活动的类。

试试这个方法。