对角UI的旋转木马引导设置活动的幻灯片 [英] Setting active slide on angular-ui-bootstrap carousel

问题描述

我使用的角度，引导和所谓的用户界面，引导的角度进行旋​​转木马的插件。

我有缩略图的列表并点击与在转盘内的高清晰度的图像的一个一个模式时，将显示，类似于你对亚马逊或其他网站什么东西。我试图设置首先显示图像中的旋转木马作为一个用户点击。

我已经能够得到使用$指数作为我是一个NG重复内图像的索引，给它的模态控制器和显示没有问题的传送带。但第一形象，我总是索引0，即使我尝试设置，我有索引。

这是一些我试过的东西：

  $ scope.SliderItems =物品; //这一次将滑块数组中的项目    项目[的selectedIndex]。主动= TRUE;
    $ scope.SliderItems [的selectedIndex]。主动= TRUE;
    $ scope.SliderItems.select（SliderItems [的selectedIndex]）;
 

我也试着将它放在一个属性，活跃属性设置为true所要求的项目显示了它，但随后被阻止在该项目上，轰然传送带。此外，试图属性数据滑动到没有成功传送带元素。

  $ scope.SelectedIndex =的selectedIndex;
 

所以我不知道使用要做到这一点哪个属性/方法，以及插件的页面上的文档不给我更多的适应症之一：（

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

有谁知道如何设置默认活动的幻灯片？甚至如何设置加载它之后，它可能是有底部的缩略图旋转木马有用，您可以单击显示主图像或什么的。

感谢。

解决

我尝试过做这样的事情，并没有以某种方式工作，但有不同的方法，我做它的工作此时再次尝试。因此，设置。主动= TRUE在控制器后，这是HTML：

 ＆LT;＆转盘GT;
        ＆LT;滑动NG重复=，在SliderItems项目激活=item.active＆GT;
            ...
        ＆LT; /幻灯片＆GT;
    ＆LT; /转盘＆GT;
 

和刚刚在情况下，控制

  $ scope.SliderItems =物品; //项目来自与物品另一控制器
    $ scope.SliderItems [的selectedIndex]。主动= TRUE; //的selectedIndex也来自其他控制器
 

解决方案

引导允许你指定一个类有效在项目有在默认情况下显示为活动的。

尝试这种方式。

I'm using angular, bootstrap and a plugin called "ui-bootstrap" for angular to make a carousel.

I have a list of thumbnails and when clicking one a modal with the images in high definition inside a carousel is displayed, something similar to what you have on Amazon or other websites. I was trying to set the first shown image in the carousel as the one the user clicked.

I've been able to get the index of the image using $index as I'm inside an ng-repeat, give it to the modal controller and displayed the carousel with no problems. But the first image i always the index 0, even if I try to set the index that I have.

These are some of the things I tried:

    $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]);

I also tried to set it on a property, setting the "active" property to true on the required item showed it but then it was blocked on that item, crashing the carousel. Also, tried the property "data-slide-to" on the carousel element without success.

    $scope.SelectedIndex = selectedIndex;

So I don't know which property/method to use to do this, and the documentation on the page of the plugin doesn't give me more indications either :(

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

Does anyone know how to set the default active slide? And even how to set it after loading it as it could be useful to have a carousel with thumbnails on the bottom that you can click to display the main image or something.

Thanks.

Solved

I tried to do something like this before and didn't work somehow, but trying again with a different approach I made it work this time. So, after setting the .active=true at the Controller, this is the HTML:

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

and just in case, the controller:

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

解决方案

Bootstrap allows you to specify a class active on the item that has to be shown as active by default.

Try it this way.

这篇关于对角UI的旋转木马引导设置活动的幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！