0

我正在使用 AngularJS 来构建我的应用程序，我想添加一个bootstrap轮播，使用angular bootstrap元素。由于这个错误（另一个链接），我决定放弃该angular bootstrap库并使用常规引导轮播，但将其注入角功率。我正在使用 生成幻灯片ng-repeat，但由于某种原因，当页面呈现时，幻灯片堆叠在一起。JSfiddle在这里。

HTML：

<div ng-app="myApp" ng-controller="MainCtrl">
  <div class="container">
    <br>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active" ng-repeat="slide in slides">
          <img src="{{slide.image}}" alt="Chania" width="460" height="345">
        </div>
      </div>

      <!-- Left and right controls -->
      <a class="left carousel-control carControl" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control carControl" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $("#myCarousel").carousel({
      interval: 4000
    })
  });

  $(".carControl").click(function(e) {
    e.preventDefault();
  });

</script>

JS：

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
  var slides = [{
    image: "http://static.tumblr.com/5e956872e3d338a2733c6fe3d69a940b/avddr52/UT5n3bshv/tumblr_static_peter_dinklage_as_tyrion_lannister_game_of_thrones_wallpaper.jpg",
    id: 1,
    text: "tyrion"
  }, {
    image: "http://static.independent.co.uk/s3fs-public/thumbnails/image/2015/06/15/09/jon-snow.jpg",
    id: 2,
    text: "jon snow"
  }, {
    image: "http://i.lv3.hbo.com/assets/images/series/game-of-thrones/character/s5/daenarys-1024.jpg",
    id: 3,
    text: "khalisi"
  }, {
    image: "http://vignette1.wikia.nocookie.net/gameofthrones/images/b/be/Gregor_Clegane_4x07.jpg/revision/latest?cb=20140707234843g",
    id: 4,
    text: "gregor"
  }];

  $scope.slides = slides;
});
4

2 回答 2

2

用它代替你的 ng-repeat div

<div class="item" ng-class="{active: ($index == 0)}" ng-repeat="slide in slides">
                    <img ng-src="{{slide.image}}" alt="Chania" width="460" height="345">
                </div>
于 2016-03-06T13:46:15.283 回答
1

正如@Ikechi Michael 已经指出的那样，您通过为它们提供活动类来使所有幻灯片都处于活动状态，因此您需要使用 ng-class 仅使第一张幻灯片处于活动状态。这是相同的 plunkr 链接。

http://plnkr.co/edit/8fvo62X2Yn8jvwgOme8V?p=preview

<div class="item" ng-class="{'active': $index===0}" ng-repeat="slide in slides">
  <img src="{{slide.image}}" alt="Chania" width="460" height="345">
</div>
于 2016-03-06T13:57:14.507 回答