帶ng-repeat的引導列

Question

我正在使用ng-repeat和ng-show在中央div（col-xs-10）中一次顯示數組的一個元素。 有兩個按鈕（col-xs-1 each）添加在中央div的左側和右側。但是，右側按鈕向下移動，並且僅在數組的最後一個元素之後顯示在正確的位置。

無法弄清楚我做錯了什麼。任何想法如何解決這個問題？

我的HTML：

<div class="container"> 
      <div class="row"> 
       <div class="col-xs-12" ng-if="!showTestimonials"> 
        {{message}} 
       </div> 
       <!--BUTTON LEFT--> 
       <div class="col-xs-1"> 
        <span ng-click="leftClick()"><i class="fa fa-angle-left"></i></span> 
       </div> 
       <!--START TESTIMONIAL--> 
       <div class="col-xs-10" ng-repeat="testimonial in testimonials" ng-if="showTestimonials"> 
        <div class="item text-center" ng-show="testimonial.id === active"> 
         <div class="testimonial-text"> 
          <i class="fa fa-quote-left"></i> 
          <p>{{testimonial.description}}</p> 
          <img src="{{testimonial.img}}" class="img-responsive" alt="" /> 
          <p style="padding:20px;"></p> 
          <h4>{{testimonial.author}}</h4> 
         </div> 
        </div> 
       </div><!--- END COL --> 
       <!--BUTTON RIGHT--> 
       <div class="col-xs-1"> 
        <span ng-click="rightClick()"><i class="fa fa-angle-right"></i></span> 
       </div> 
      </div><!--- END ROW --> 
     </div> 

JS：

$scope.active = 0; 
$scope.rightClick = function() { 
    if ($scope.active < ($scope.testimonials.length - 1)) { 
     $scope.active +=1; 
    } else { 
     $scope.active = 0; 
    } 

    return $scope.active; 
}; 
$scope.leftClick = function() { 
    if ($scope.active > 0) { 
     $scope.active -=1; 
    } else { 
     $scope.active = 4; 
    } 

    return $scope.active; 
}; 

截圖：

with last element

with all other elements

Answer 1

這裏不需要ng-repeat。所有你需要的

1- create an active-testimonial object and initialize with testimonials[0] and active-index=0 
2- on previous click get previous element from the array and assign to active-testimonial 
3- on next button click get the next testimonial and assign to active testimonial. 

注：請照顧零指數和推薦的數組的最後一個索引的

Answer 2

我THI如果你應該先清理一些其他的東西，那麼問題可能會消失或變得更加明顯。

具體來說，你打開和關閉什麼似乎並不一致：在col-xs-1的沒有一個ng-show規則，但我想關鍵是要只顯示他們，如果showTestimonials是真實的。 col-xs-12也可能在它自己的行中。然後你可以切換整行，並且會有更少的意外。

<div class="row" ng-show="!showTestimonials"> 
    <div class="col-xs-12">...</div> 
</div> 
<div class="row" ng-show="showTestimonials"> 
    <div class="col-xs-1">...</div> 
    <div class="col-xs-10" ng-repeat="..." ng-show="testimonial.id == active">...</div> 
    <div class="col-xs-1">...</div> 
</div> 

最後，確保沒有你的CSS的是增加保證金或填充，以.row或.col*元素，這可能會增加他們的寬度，讓他們在你的屏幕截圖包裝等。