用AngularJS引导Carousel中的动态背景色

Dynamic background color in Bootstrap Carousel with AngularJS

本文关键字:动态 背景色 Carousel AngularJS 引导      更新时间:2023-09-26

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

  1. 最初,carousel的"活动"部分按预期动态地为每个缩略图添加背景颜色。
  2. 然而,一旦我开始旋转旋转木马,所有缩略图失去了他们的背景颜色。现在,当我重新加载页面时,所有缩略图再次获得背景颜色。

所以我不明白是什么导致了背景颜色在旋转过程中最初的损失?谢谢。

    <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"(或任何其他#)的字符串。我想号码前面一定要有"#"标志。当我删除"#"时,它开始工作。