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

我认为你应该首先清理其他一些东西，然后问题可能会消失或变得更加明显。

具体来说，您打开和关闭的内容似乎并不一致：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*元素添加边距或填充，这可能会增加它们的宽度并使它们像截图一样包裹。

Answer 2

这里你不需要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个索引和推荐数组的最后一个索引

具有ng-repeat

2 个答案: