对不起HTML和AngularJS中的这个初学者问题。我在一个页面中有两个幻灯片框。我希望当用户点击上一个/下一个箭头按钮时,它会显示上一张/下一张幻灯片。但问题是当单击上一个/下一个箭头时,两个框中的所有幻灯片都会转到上一张/下一张幻灯片。单击第一个幻灯片框中的下一个按钮时,如何只有第一个幻灯片框中的幻灯片进入下一张幻灯片?我可以只用$ ionicSlideBoxDelegate来做,还是需要另一种方式?感谢...
这是我的HTML代码:
ListOfObjects.OrderBy(t => t.letter).ThenBy(t => t.letter.StartsWith("c") ? 2 : 1).ThenBy(t => t.id);
这是我的控制器代码:
<ion-slide-box show-pager="false" auto-play="true" does-continue="true" style="background-image:url('img/border.jpg'); background-repeat: no-repeat;">
<ion-slide>
<h3 style="padding-left:10px; padding-top:5px;">Pizza Favourite</h3>
<div class="row">
<div class="ion-ios-arrow-back col col-5" style="padding-top:50px;" ng-click="previousSlide()"/></div>
<span class="row">
<img src="img/pizza1.jpg" class="col col-50" style="width:100px; height:100px; margin-top:-10px">
<div class="col col-50">
<h4 class="row" style="margin-top:-10px">Pizza 1 </h4>
<div class="row" style="margin-top:-20px">
<img src="img/smile.jpg" style="width:50px; height:50px;"class="col col-40">
<h4 class="col col-60"> 5.0</h4>
</div>
</div>
</span>
<div class="ion-ios-arrow-forward col-5" style="padding-top:50px;" ng-click="nextSlide()"/></div>
</div>
</ion-slide>
<ion-slide>
<h3 style="padding-left:10px; padding-top:5px;">Pizza Favourite</h3>
<div class="row">
<div class="ion-ios-arrow-back col col-5" style="padding-top:50px;" ng-click="previousSlide()"/></div>
<span class="row">
<img src="img/pizza2.jpg" class="col col-50" style="width:100px; height:100px; margin-top:-10px">
<div class="col col-50">
<h4 class="row" style="margin-top:-10px">Pizza 2 </h4>
<div class="row" style="margin-top:-20px">
<img src="img/smile.jpg" style="width:50px; height:50px;"class="col col-40">
<h4 class="col col-60"> 5.0</h4>
</div>
</div>
</span>
<div class="ion-ios-arrow-forward col-5" style="padding-top:50px;" ng-click="nextSlide()"/></div>
</div>
</ion-slide>
<ion-slide>
<h3 style="padding-left:10px; padding-top:5px;">Pizza Favourite</h3>
<div class="row">
<div class="ion-ios-arrow-back col col-5" style="padding-top:50px;" ng-click="previousSlide()"/></div>
<span class="row">
<img src="img/pizza3.jpg" class="col col-50" style="width:100px; height:100px; margin-top:-10px">
<div class="col col-50">
<h4 class="row" style="margin-top:-10px">Pizza 3</h4>
<div class="row" style="margin-top:-20px">
<img src="img/smile.jpg" style="width:50px; height:50px;"class="col col-40">
<h4 class="col col-60"> 5.0</h4>
</div>
</div>
</span>
<div class="ion-ios-arrow-forward col-5" style="padding-top:50px;" ng-click="nextSlide()"/></div>
</div>
</ion-slide>
</ion-slide-box>
<ion-slide-box show-pager="false" auto-play="true" does-continue="true" style="background-image:url('img/border.jpg'); background-repeat: no-repeat;">
<ion-slide>
<h3 style="padding-left:10px; padding-top:5px;">Burger Favourite</h3>
<div class="row">
<div class="ion-ios-arrow-back col col-5" style="padding-top:50px;" ng-click="previousSlide()"/></div>
<span class="row">
<img src="img/burger1.jpg" class="col col-50" style="width:100px; height:100px; margin-top:-10px">
<div class="col col-50">
<h4 class="row" style="margin-top:-10px">Burger 1 </h4>
<div class="row" style="margin-top:-20px">
<img src="img/smile.jpg" style="width:50px; height:50px;"class="col col-40">
<h4 class="col col-60"> 5.0</h4>
</div>
</div>
</span>
<div class="ion-ios-arrow-forward col-5" style="padding-top:50px;" ng-click="nextSlide()"/></div>
</div>
</ion-slide>
<ion-slide>
<h3 style="padding-left:10px; padding-top:5px;">Burger Favourite</h3>
<div class="row">
<div class="ion-ios-arrow-back col col-5" style="padding-top:50px;" ng-click="previousSlide()"/></div>
<span class="row">
<img src="img/burger2.jpg" class="col col-50" style="width:100px; height:100px; margin-top:-10px">
<div class="col col-50">
<h4 class="row" style="margin-top:-10px">Burger 2 </h4>
<div class="row" style="margin-top:-20px">
<img src="img/smile.jpg" style="width:50px; height:50px;"class="col col-40">
<h4 class="col col-60"> 5.0</h4>
</div>
</div>
</span>
<div class="ion-ios-arrow-forward col-5" style="padding-top:50px;" ng-click="nextSlide()"/></div>
</div>
</ion-slide>
<ion-slide>
<h3 style="padding-left:10px; padding-top:5px;">Burger Favourite</h3>
<div class="row">
<div class="ion-ios-arrow-back col col-5" style="padding-top:50px;" ng-click="previousSlide()"/></div>
<span class="row">
<img src="img/burger3.jpg" class="col col-50" style="width:100px; height:100px; margin-top:-10px">
<div class="col col-50">
<h4 class="row" style="margin-top:-10px">Burger 3</h4>
<div class="row" style="margin-top:-20px">
<img src="img/smile.jpg" style="width:50px; height:50px;"class="col col-40">
<h4 class="col col-60"> 5.0</h4>
</div>
</div>
</span>
<div class="ion-ios-arrow-forward col-5" style="padding-top:50px;" ng-click="nextSlide()"/></div>
</div>
</ion-slide>
</ion-slide-box>
答案 0 :(得分:4)
您需要指定&#34;句柄&#34;对于每个幻灯片框:
<ion-slide-box delegate-handle="burgers">...</ion-slide-box>
然后您可以使用句柄控制特定的幻灯片框:
$ionicSlideBoxDelegate.$getByHandle('burgers').next();