Bootstrap+AngularJS轮播组件问题：图片列表无法正常显示求助

看起来你在AngularJS里用Bootstrap轮播时踩了两个常见的坑，我帮你梳理下问题和修复方案：

问题分析 #

你的代码里有两个关键问题：

• ng-repeat的位置错误：你把ng-repeat放在了.carousel-inner上，这会导致AngularJS为每一部电影生成一个独立的.carousel-inner容器，而Bootstrap轮播要求所有轮播项都在同一个.carousel-inner里面。
• 缺少active类：Bootstrap轮播需要至少一个.carousel-item带有active类，否则初始状态下轮播不会渲染任何内容。

修正后的代码 #

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <!-- 将ng-repeat移到carousel-item上，并给第一个item添加active类 -->
    <div class="carousel-item" ng-repeat="movie in actionMovies" ng-class="{'active': $first}">
      <img class="d-block img-fluid" src="{{movie.image}}" alt="{{movie.name}}">
    </div>
  </div>
  <!-- 补全之前截断的控制按钮代码 -->
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

关键修改说明 #

• 把ng-repeat从.carousel-inner移动到.carousel-item上，确保所有轮播项都在同一个轮播内部容器里。
• 使用ng-class="{'active': $first}"让AngularJS自动给第一个轮播项添加active类，满足Bootstrap的初始化要求。
• 补全了你之前截断的控制按钮代码，确保前后切换功能正常工作。

如果你的actionMovies数组是异步加载的（比如从API获取），还要确保数组加载完成后再渲染轮播，避免因为数据未就绪导致的渲染问题。

内容的提问来源于stack exchange，提问作者Alex Crowel