我有幾張幻燈片,如果我像這里的示例一樣簡單地列舉它們,我就可以顯示所有指標:
這是我的 AngularJS 指令的 HTML。
<div class="container slide" id="myCarousel" data-interval="{{carouselVM.interval }}" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators" ng-repeat="curItem in carouselVM.data">
<li data-target="#myCarousel" data-slide-to="$index" ng-class="{'active': $index == 0}"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item" style="background-image: url("{{curItem.image}}");" ng-repeat="curItem in carouselVM.data" ng-class="{'active' : !$index}">
<div class="item-headline" ng-bind-html="curItem.description">
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left switch-button" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left fa fa-angle-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right switch-button" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right fa fa-angle-right"></span>
<span class="sr-only">Next</span>
</a><br>
</div>
如何在每張幻燈片上顯示所有指標?
uj5u.com熱心網友回復:
我得到了我需要的東西。該ng-repeat需求在發生<li>不<ol>。
<div class="container slide" id="myCarousel" data-interval="{{carouselVM.interval }}" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="$index" ng-class="{'active': $index == 0}" ng-repeat="curItem in carouselVM.data"> </li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item" style="background-image: url("{{curItem.image}}");" ng-repeat="curItem in carouselVM.data" ng-class="{'active' : !$index}">
<div class="item-headline" ng-bind-html="curItem.description">
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left switch-button" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left fa fa-angle-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right switch-button" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right fa fa-angle-right"></span>
<span class="sr-only">Next</span>
</a><br>
</div>
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/399266.html
