ng-repeat가있는 부트 스트랩 열

Question

ng-repeat 및 ng-show를 사용하여 중앙 div (col-xs-10)에 한 번에 하나의 배열 요소를 표시합니다. 중앙 div의 왼쪽과 오른쪽에 두 개의 단추 (각각 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 생 nk 당신은 먼저 다른 것들을 정리해야합니다. 그런 다음 문제가 사라지거나 더 명백해질 수 있습니다. 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* 요소에 마진이나 패딩을 추가하지되어 있는지 확인합니다.