無法創建引導旋轉木馬

我用AngularJS來構建我的應用程序，我想補充一個bootstrap旋轉木馬，使用angular bootstrap元素被注入AngularJs。由於this錯誤（另一個link），我決定放棄angular bootstrap庫，並使用常規的引導旋轉木馬，但用角功率注入它。我生成使用ng-repeat的幻燈片，但在頁面呈現某種原因，幻燈片堆積起來一個比另一個。 JSfiddle here。無法創建引導旋轉木馬

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; 
});

來源

2016-03-06 undroid

你可以做一個JSBin或小提琴顯示的問題？ –

有一個鏈接到JS小提琴，問題描述後:)只是abovr的HTML代碼。 – undroid

噢，對不起，忽略了吧:) –

使用此到位您的NG-重複的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-06 13:46:15

由於@Ikechi邁克爾已經指出你做的所有這些幻燈片通過給予它們活動類來激活，所以您需要使用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-06 13:57:14 harshk17

無法創建引導旋轉木馬

回答

相關問題