ng-repeatのブートストラップカラム

Question

私はng-repeatとng-showを使用して、中央のdiv（col-xs-10）に一度に1つの配列の要素を表示しています。 中央のdivの左右に2つのボタン（それぞれcol-xs-1）が追加されています。ただし、右ボタンは下にシフトされ、配列の最後の要素の後の正しい場所にのみ表示されます。

私が間違っていることを理解できません。任意のアイデアをどのようにこれを解決するには？

マイ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. 

注意が必要：0番目のインデックスと証言の配列の最後のインデックスの世話をしてくださいjsfiddleまたはplunkerに

Answer 2

I THI最初に他のものを整理しなければならない場合は、問題が解消するか、より明白になる可能性があります。 col-xs-1年代はng-showルールを持っていないが、私はshowTestimonialsがtrueの場合にのみ、それらを表示するためにポイントがあると想像：

具体的には、あなたがオフに切り替えるとしているものは一貫していないようです。また、 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*要素にマージンやパディングを追加していないことを確認してください。