AngularJs:在旋转木马中包含ng-repeat的问题

时间:2016-01-31 11:19:28

标签: javascript jquery angularjs twitter-bootstrap flexslider

我正在使用flexslider创建旋转木马,我正在使用ng-repeat在该旋转木马中显示所需的列表。

我想要的是它在一张幻灯片中显示一个项目,但它在第一张幻灯片中显示整个列表,在第二张幻灯片中,它只显示第一个项目与列表本身的大小一样多。< / p>

请帮助,谢谢。

 <div class="page" ng-controller="mainController" >
    <section class="container-fluid">
        <div class="row-fluid bg-white">
            <div class="flexslider">
                <ul class="slides" ng-repeat="f in feed" >
                    <li class="carousel-bg1 ">
                        <div class="carousel-data">
                            <div class="carousel-text">
                                <h5><span>{{f.time}}</span></h5>
                            </div>
                            <div class="row-fluid testimonial-spec">
                                <article class="span10 carousel-text">
                                    <p>{{f.news}}</p>
                                </article>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div><!-- row-fuild : ends -->
    </section> <!-- container-fluid : ends-->
</div> <!-- competitions-carousel : ends -->

1 个答案:

答案 0 :(得分:0)

您正在重复滑块ul列表,并且很可能想要重复li列表项。试一试:

<div class="page" ng-controller="mainController" >
    <section class="container-fluid">
        <div class="row-fluid bg-white">
            <div class="flexslider">
                <ul class="slides">
                    <li class="carousel-bg1"  ng-repeat="f in feed">
                        <div class="carousel-data" >
                            <div class="carousel-text">
                                <h5><span>{{f.time}}</span></h5>
                            </div>
                            <div class="row-fluid testimonial-spec">
                                <article class="span10 carousel-text">
                                    <p>{{f.news}}</p>
                                </article>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div><!-- row-fuild : ends -->
    </section> <!-- container-fluid : ends-->
</div> <!-- competitions-carousel : ends -->