Bootstrap 列有 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

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

具体来说，您打开和关闭的内容似乎并不一致：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 的 none 正在向 .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 个索引和最后一个索引

Bootstrap 列有 ng-repeat

Bootstrap columns with ng-repeat

javascript

angularjs

twitter-bootstrap

angularjs-ng-repeat

ng-show