AngularJS - 带有轮播的 ng-repeat答案

【问题标题】：AngularJS - ng-repeat with carouselAngularJS - 带有轮播的 ng-repeat
【发布时间】：2018-10-15 11:25:57
【问题描述】：

我尝试使用 ng-repeat 制作轮播。图像加载成功，但上一个和下一个按钮不起作用。这是我的代码

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item {{::($index === 0 ? 'active' : '')}}" ng-repeat="movie in popularMovies track by $index">
      <div class="row">
        <img class="d-block w-100" src="{{movie.image}}" alt="{{movie.name}}">
      </div>
    </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-click 上更新该值？

标签： angularjs bootstrap-4 carousel

【解决方案1】：

尝试将您的 Angular 元素添加到以下代码中，它会起作用。

我猜你的下一个和上一个都不起作用，因为在导入 js 文件时可能会出现一些错误

如果这能解决您的问题，请告诉我。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.js"></script>

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">

      <img class="d-block w-100" src="https://cdn.pixabay.com/photo/2013/04/06/11/50/image-editing-101040_1280.jpg" alt="{{movie.name}}">
    </div>
    <div class="carousel-item">

      <img class="d-block w-100" src="https://demo.phpgang.com/crop-images/demo_files/pool.jpg" 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>

【讨论】：