【问题标题】:Dynamic background color in Bootstrap Carousel with AngularJS使用 AngularJS 的 Bootstrap Carousel 中的动态背景颜色
【发布时间】:2015-07-23 00:13:21
【问题描述】:

我在使用 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-->

【问题讨论】:

标签: javascript jquery css angularjs twitter-bootstrap


【解决方案1】:

好吧,我找到了如何修复它,但我仍然不明白为什么原来的不工作(以及为什么修复工作):

my {{img.tile_color}}"#1956B7"(或任何其他 #)形式的字符串。我认为必须在数字前面有 "#" 符号。当我删除 "#" 它开始工作。

【讨论】:

    猜你喜欢
    • 2015-07-29
    • 1970-01-01
    • 2016-10-28
    • 1970-01-01
    • 2015-09-21
    • 1970-01-01
    • 2014-06-06
    • 2018-01-21
    • 2017-11-23
    相关资源
    最近更新 更多