繁体   English   中英

带有AngularJS的Bootstrap轮播中的动态背景色

[英]Dynamic background color in Bootstrap Carousel with AngularJS

我在与AngularJS一起使用的Bootstrap Carousel中有一个奇怪的行为。 下面是HTML代码,我试图在其中动态地向每个缩略图添加背景色。 我观察到以下内容:

  1. 最初,轮播的“活动”部分按预期向每个缩略图动态添加背景颜色。
  2. 但是,一旦我开始旋转转盘,所有缩略图将失去其背景色。
  3. 现在,当我重新加载页面时,所有缩略图再次变为背景色。

因此,我无法理解到底是什么导致旋转过程中背景色的损失? 谢谢。

    <div class="well">
        <div id="myCarousel" class="carousel slide">

            <!-- Carousel items -->
            <div class="carousel-inner">


                <div ng-repeat="imgSet in imgSets" ng-class="{item: true, active : $first}"> 
                    <div ng-class="row">
                        <div ng-repeat="img in imgSet track by img.id" class="col-sm-3">

                            <a href="/appDetail/{{img.id}}" class="thumbnail" style="background-color: {{img.tile_color}};"> 


                                <img ng-src="{{uri}}/{{img.image}}" alt="Image" class="img-responsive" height="{{img.tile_height}}" width="{{img.tile_width}}">
                            </a>
                        </div>
                    </div>    
                    <!--/row-->
                </div>
                <!--/item-->

            </div>
            <!--/carousel-inner--> 

            <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
        </div>
        <!--/myCarousel-->
    </div>
    <!--/well-->

好吧,我找到了解决方法,但是我仍然不明白为什么原始文档不起作用(以及为什么该修复程序起作用):

我的{{img.tile_color}}是形式为“#1956B7” (或其他任何#)的字符串。 我以为一个数字前面必须带有“#”号。 当我删除“#”后,它开始工作。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM