如何使用角度ng-repeat来实现bootstrap corousel?(How to implement bootstrap corousel with angular ng-repeat?)
当我试图在corousel内部使用ng-repeat时,corousel无法正常工作,如何使用带有ng-repeat的旋转木马?
When I am trying to use ng-repeat inside corousel-inner the corousel is not working properly, how to use carousel with ng-repeat ?
最满意答案
不准确,但似乎是你想要的。
<div class="container" ng-show="ifImages"> <br> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators" ng-repeat="image in images"> <li data-target="#myCarousel" data-slide-to="$index" ng-class="{'active': $index == 0}"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox" ng-repeat="image in images"> <div class="item" ng-class="{'active': $index == 0}"> <img bn-lazy-src="{{image.fullPath}}" title="{{image.description}}" alt="missing" /> <div class="carousel-caption"> <h3>{{image.name}}</h3> <p>{{image.description}}</p> </div> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>Not exact but seems like what you want.
<div class="container" ng-show="ifImages"> <br> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators" ng-repeat="image in images"> <li data-target="#myCarousel" data-slide-to="$index" ng-class="{'active': $index == 0}"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox" ng-repeat="image in images"> <div class="item" ng-class="{'active': $index == 0}"> <img bn-lazy-src="{{image.fullPath}}" title="{{image.description}}" alt="missing" /> <div class="carousel-caption"> <h3>{{image.name}}</h3> <p>{{image.description}}</p> </div> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>更多推荐
发布评论