如何使用角度ng

如何使用角度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>