AngularJS NG重复与引导旋转木马 [英] AngularJS ng-repeat with bootstrap carousel

问题描述

我试图让这个NG-重复循环和引导旋转木马的工作，但我明白，我目前使用的轮播的方式在其他地方是只有一个包含图像的DIV可以用活跃类标记，并与活跃否则传送带发生故障1格必须标明。如果多于一个的标记，也将失败。一个且只有一个分区可以标记活性。每一个其他分区应该只被标记为类=项目'如何做我做与NG-重复发生的呢？谢谢你。

 ＆LT; D​​IV CLASS =旋转木马ID =滑盖的风格=保证金左：20像素;＆GT;    ＆LT;标签类=labelSecurity＆GT;事故照片＆LT; /标签＆gt;＆LT; BR /＆GT;    ＆LT; D​​IV CLASS =旋转木马-内＆GT;
        ＆LT; D​​IV CLASS =项目活动NG-重复=照片photoPath＆GT;
            ＆LT; IMG SRC ={{photo.path}}级=IMG响应＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;    ＆LT;一类=旋转木马控制权的href =＃滑盖数据滑=下一步＆GT;＆LT; / A＆GT;＆LT; / DIV＆GT;
 

解决方案

然后就标志着第一个作为活跃的，像这样的：

 ＆LT; D​​IV CLASS =项NG-CLASS ={活跃：$指数}NG重复=照片photoPath＆GT;
 

I am trying to get this ng-repeat loop to work with the bootstrap carousel, but the way I understand and am currently using the carousel elsewhere is that only one div containing an image can be marked with the 'active' class, and one div must be marked with active otherwise the carousel fails. It also fails if more than one is marked. One and only one div can be marked active. Every other div should just be marked 'class=item' How to do I make that happen with ng-repeat? Thank you.

<div class="carousel" id="slider" style="margin-left: 20px;">

    <label class="labelSecurity">Incident Photos</label><br />

    <div class="carousel-inner">
        <div class="item active" ng-repeat="photo in photoPath">
            <img src="{{ photo.path }}" class="img-responsive">
        </div>
    </div>

    <a class="carousel-control right" href="#slider" data-slide="next"></a>

</div>

解决方案

Then just mark the first one as active, like this:

<div class="item" ng-class="{active:!$index}" ng-repeat="photo in photoPath">

这篇关于AngularJS NG重复与引导旋转木马的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！