0

在我问之前，我已经经历了这个，但这对我来说似乎不是问题。我在 angularJS 中使用纯文本轮播，此示例作为参考。

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

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

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>

有人可以帮我理解这里的轮播显示以及为什么会出现错误，我已经设置了其他帖子中提到的活动元素，但它仍然不能解决问题。

提前致谢

4

2 回答 2

1

您的 ng-repeat 将为消息中的每个项目创建一个带有“carousel-inner”类的新外部 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-startandng-repeat-end当你想在多个元素上迭代重复而不将它们封装在另一个元素中时。

于 2016-12-07T14:44:54.100 回答
0

我发现问题不在于“Active”类，而是在 Angular ng-repeat 中使用“$index”。在设定滑动的状态下，

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

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

于 2016-12-07T21:52:16.910 回答