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

Question

我正在使用 angular、bootstrap 和一个名为“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]);

我还尝试在一个属性上设置它，在所需项目上将“活动”属性设置为 true，但随后它在该项目上被阻止，导致轮播崩溃。另外，在轮播元素上尝试了属性“data-slide-to”，但没有成功。

    $scope.SelectedIndex = selectedIndex;

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

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

有谁知道如何设置默认的活动幻灯片？甚至在加载后如何设置它，因为在底部有一个带有缩略图的轮播可能很有用，您可以单击它来显示主图像或其他内容。

谢谢。

已解决

我以前尝试过这样的事情，但没有成功，但是用不同的方法再次尝试，这次我成功了。所以，在控制器上设置 .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

uib-carousel 元素上有一个active 指令：

<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 会监视“活动”字段，并会创建到所选幻灯片的平滑过渡。

我相信这种行为是最近才出现的，它取代了旧版本中设置 active 属性。

Answer 2

Bootstrap 允许您在 item 上指定一个类 active，默认情况下必须显示为活动。

试试这个方法。

Answer 3

我有同样的问题。 就我而言，当我将活动幻灯片设置为 true 时，下一个和上一个操作不起作用。

这里是 codepen。 '//codepen.io/tiemin/pen/QyOYYb'

请参阅 CodePen 上 Tiemin Li (@tiemin) 的 Pen Test carousel 设置活动幻灯片。

似乎当前的 ui-bootstrap 版本与 angular 不兼容。

Answer 4

我试图弄清楚如何在 Bootstrap Carousel 中设置我的第一个项目： http://getbootstrap.com/javascript/#carousel

到页面加载时的“活动”类，如下所示：

<div class="item active">

并通过使用 ngClass 指令解决了这个问题： https://docs.angularjs.org/api/ng/directive/ngClass

添加一个判断索引是否为0的表达式，然后设置类为“active”。

例子：

<div class="item" ng-class="{{$index}} == 0 ? 'active' : ''" ng-repeat="image in $ctrl.images">

这在页面上呈现为：

<div class="item ng-binding ng-scope active" ng-class="0 == 0 ? 'active' : ''" ng-repeat="image in $ctrl.images">