【发布时间】:2015-07-23 00:13:21
【问题描述】:
我在使用 AngularJS 的 Bootstrap Carousel 中有一个奇怪的行为。下面是我尝试为每个缩略图动态添加背景颜色的 HTML 代码。我观察到的情况如下:
- 最初,轮播的“活动”部分按预期为每个缩略图动态添加背景颜色。
- 但是,一旦我开始旋转轮播,所有缩略图都会失去其背景颜色。
- 现在,当我重新加载页面时,所有缩略图都会重新获得背景颜色。
所以我不明白在旋转过程中最初导致背景颜色丢失的原因是什么?谢谢。
<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-->
【问题讨论】:
-
这里我试图用一个更简单的例子重现这个问题。看起来我们需要加上单引号才能工作plnkr.co/edit/KOjRnZNu1wQff76x8skF?p=preview
标签: javascript jquery css angularjs twitter-bootstrap