Question

我在ng-repeat中遇到了Bootstrap轮播的问题，因为如果轮播更改，图像不会逐个加载，但所有图像都会加载一次。我在stackoverflow中发现了类似的问题，但在我的情况下，我从数据库加载数据（不使用$scope）

<div class="container"> 
   <div class="carousel slide" id="myCarousel">
       <div class="carousel-inner">
          <div class="item active">
             <div class="row">
                <div class="col-xs-3" ng-repeat="product in main.products"><a href="#"><img ng-src="../../uploads/{{ product.imagePath }}" class="img-responsive"></a></div>
              </div>
           </div>
           <div class="item"> 
             <div class="row">
                <div class="col-xs-3" ng-repeat="product in main.products"><a href="#"><img ng-src="../../uploads/{{ product.imagePath }}" class="img-responsive"></a></div> 
              </div>
            </div>
          </div>
          <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
           <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
       </div>
    </div>

Answer 1

问题是您要在旋转木马的项目内重复所有图像。轮播项目由“项目”类定义。如果您想要一次显示单个图像，请重复这样的项目：

<div class="container"> 
   <div class="carousel slide" id="myCarousel">
       <div class="carousel-inner">
          <!-- add the `active` class to the first item with one-time binding (if $index is 0) -->
          <div class="item {{::($index === 0 ? 'active' : '')}}" ng-repeat="product in main.products track by $index">
             <div class="row">
                <div class="col-xs-3"><a href="#"><img ng-src="../../uploads/{{ product.imagePath }}" class="img-responsive"></a></div>
             </div>
          </div>
          <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
          <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
       </div>
    </div>
</div>

ng-repeat中的Bootstrap轮播

1 个答案: