使用$ ionicSlideBoxDelegate为Ionic中的两个或更多幻灯片框

时间:2015-08-14 14:42:58

标签: javascript html angularjs ionic

对不起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>

1 个答案:

答案 0 :(得分:4)

您需要指定&#34;句柄&#34;对于每个幻灯片框:

<ion-slide-box delegate-handle="burgers">...</ion-slide-box>

然后您可以使用句柄控制特定的幻灯片框:

$ionicSlideBoxDelegate.$getByHandle('burgers').next();

这里是documentation for $getByHandle