Question

在我问我之前this，但这似乎不是我的问题。我在angularJS中使用纯文本轮播，以this为例进行参考。

我正在尝试使用角度数组的第一个索引元素为旋转木马设置活动类，然后其他项将来自第二个索引。它显示了活动元素，但是当我尝试单击第二个元素时，它会给出上述错误。

以下是我到目前为止所做的工作。

HTML文件：

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
  </style>

</head>

<div id="myCarousel" style="height:100px" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->

    <ol layout="row" class="carousel-indicators" >
    <div  ng-repeat="message in messages">
      <li  data-target="#myCarousel" data-slide-to="$index" class="active" ng-if="$index === 0" ></li>
      <li  data-target="#myCarousel" data-slide-to="$index"  ng-if="$index !== 0" ></li>
   </div>


    </ol>

    <!-- Wrapper for slides -->
    <div layout="row"  class="carousel-inner" ng-repeat="message in messages"  role="listbox">
      <div class="item active" ng-if="$index === 0">
        {{message.text}}
      </div>
     <div  class="item" ng-if="$index !== 0">
        {{message.text}}
      </div>

    </div>


  </div>

有人可以帮助我理解这里的轮播显示以及错误给出的原因，我已经设置了另一篇文章中提到的活动元素，但它仍然无法解决问题。

提前致谢

Answer 1

你的ng-repeat将为你的消息中的每个项目创建一个带有“carousel-inner”类的新outter div，而你想要做的就是把它移到里面，如下所示：

<div layout="row"  class="carousel-inner product-carousel" role="listbox">
    <div class="item active" ng-if="$index === 0" ng-repeat-start="message in messages">
       {{message.text}}
    </div>

    <div  class="item" ng-if="$index !== 0" ng-repeat-end>
       {{message.text}}
    </div>
</div>

当你想迭代重复多个元素而不将它们封装在另一个元素中时，请使用ng-repeat-start和ng-repeat-end。

Answer 2

我发现问题不在于“Active”类，而是在角度ng-repeat中使用“$ index”。在设置滑动的情况下，

data-slide-to="$index"应替换为data-slide-to="{{$index}}"

当我们尝试单击幻灯片时，由$ index给出的设置为值的数据目标将变为空，因此发生了未定义的错误。其余代码没有问题，错误已修复。

Angular Carousels：Uncaught TypeError：在使用带有Angular JS的轮播时无法读取未定义的属性'offsetWidth'

2 个答案: