试着用ng-repeat创建一个旋转木马

Question

我有一个ng-repeat，它在自己的div中显示图像及其对应的名称。

我想把它变成一个旋转木马，其中3个显示在屏幕上，并有一个滑块移动到下一个3。我已经成功地显示了名称，虽然一次显示一个，而不是我想要的三个，但是没有显示图像。谁能告诉我在哪里可以找到这个工作?

<section class="container">
    <div class="row">
        <div class="col-sm-12">   
          <h4>Tailor the Message for Your Audience:</h4>
          <hr />
        </div>
    </div>
    <div class="carousel" id="slider" style="margin-left: 20px;">
        <div class="carousel-inner">
            <div ng-class="{active:!$index}" ng-repeat="a in initiatives.audiences | orderBy:'position'" class="item" ng-if="a.name !== $parent.$state.params.audience_name && a.name !== 'core-message'">
                <a href="{{ a.name }}" force-refresh>
                    <!-- <div class="rectangle"> -->
                    <img ng-style="{'background-image': 'url(' + a.hero + ')'}"></img>
                    <!-- </div> -->
                    <p>{{ a.name.replace('-', ' ') }}</p>         
                </a>
            </div>
        </div>
        <a class="carousel-control right" href="#slider" data-slide="next"></a>
    </div>  
</section>

Answer 1

尝试:

<img ng-src="{{ a.hero }}"></img>