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但是然后它在该项目上被阻止，从而导致旋转木马崩溃。此外，尝试了carousel元素上的“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。

以这种方式试试。

Answer 3

我有同样的问题。在我的情况下，当我将活动幻灯片设置为true时，next和prev操作不起作用。

这是codepen。＆＃39; // codepen.io/tiemin/pen/QyOYYb'

有关CodePen的Tiemin Li（@tiemin）的设置活动幻灯片，请参阅Pen Test carousel。

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

Answer 4

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

一类活跃的＆＃34;在页面加载，像这样：

<div class="item active">

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

添加一个确定索引是否为0的表达式，然后将该类设置为＆＃34; active＆＃34;。

示例：

<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">

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

4 个答案: