用AngularJS引导Carousel中的动态背景色
Dynamic background color in Bootstrap Carousel with AngularJS
我在Bootstrap Carousel中有一个奇怪的行为,我使用AngularJS。下面是HTML代码,我试图动态地为每个缩略图添加背景颜色。我观察到的是:
- 最初,carousel的"活动"部分按预期动态地为每个缩略图添加背景颜色。 然而,一旦我开始旋转旋转木马,所有缩略图失去了他们的背景颜色。现在,当我重新加载页面时,所有缩略图再次获得背景颜色。
所以我不明白是什么导致了背景颜色在旋转过程中最初的损失?谢谢。
<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"(或任何其他#)的字符串。我想号码前面一定要有"#"标志。当我删除"#"时,它开始工作。
相关文章:
- jquery.each(第2行)添加背景色
- 如果使用javascript函数屏幕太小,我该如何更改HTML文件的背景色
- 悬停时淡入背景色
- 如何在单击单元格中的链接值时动态更改表行背景色
- Gridview内部的下拉框在回发时未保留背景色
- 用背景色智能填充引导列
- 带有背景色的高图表柱形图
- 带有javascript的选定文本的背景色
- 当代码使用背景色时无法更改位置
- 将元素放置在方框顶部时更改方框的背景色
- 检索表中元素的背景色
- 在Wordpress中创建随机背景色
- 存在事件的单元格的jQuery DatePicker背景色(加载时)
- CSS转换未在增加高度时更新背景色
- 如何设置按钮来更改按钮的背景色
- 避免使用背景色和边框色
- 如何用背景色动态填充表格单元格
- 如何动态添加元素制作背景色动画
- qTip2的动态背景色
- 用AngularJS引导Carousel中的动态背景色