javascript - Dynamic background color in Bootstrap Carousel with AngularJS -
i have strange behaviorin bootstrap carousel using angularjs. below html code trying dynamically add background color each thumbnail. observe following:
- initially, "active" part of carousel adds background color dynamically each thumbnail expected.
- however, once start rotating carousel, thumbnails lose background color.
- now, when reload page, thumbnails background color again.
so cannot understand causing loss of background color during rotation? thanks.
<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 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-->
well found how fix it, still not understand why original not working (and why fix working):
my {{img.tile_color}} string of form "#1956b7" (or other #). thought 1 must have "#" sign in front of number. when removed "#" started working.
Comments
Post a Comment