如何在Ionic中基于Carousel更改页面内容

Question

我是离子框架的新手，我正在使用此链接中的轮播＆＃34; http://www.gajotres.net/how-to-create-elegant-slider-carousel-in-ionic-framework/＆＃34;。

我必须根据轮播的幻灯片更改页面内容。

Answer 1

在这里，它可能会帮助你:)

<div id="miniMizedCarousel" class="carousel slide" data-ride="carousel">
                                    <!-- Wrapper for slides -->
                                    <div class="carousel-inner" role="listbox">
                                        <div class="item active">
                                             <div id="textViewer" class="fluidMedia">
                                               <div ng-switch-when="VIDEO" ng-class="{'marBot45':fullScreen==true}">
                                                    <div class="loader">Loading...</div>
                                                    <div xyz-video videocode="videoCode">
                                                    </div>
                                                </div>
                                                <div id="quizViewer" ng-switch-when="QUIZ" ng-bind="lessonContent">
                                                </div>
                                                <div id="Div2" class="fsContentArea" ng-switch-when="TEXT" ng-bind="lessonContent">
                                                </div>
                                                <div id="htmlViewer" class="lessonContentArea" ng-switch-when="HTML" ng-bind-html="lessonContent">
                                                </div>
                                                <div ng-switch-when="HTMLACTIVITY" ng-class="{'marBot45':fullScreen==true}">
                                                    <div class="loader">Loading...</div>
                                                    <iframe id="htmlActivity" ng-src="{{lessonContent}}">
                                                    </iframe>
                                                 </div>
                                                <div ng-switch-when="PDF" ng-class="{'marBot45':fullScreen==true}">
                                                    <div class="loader">Loading...</div>
                                                    <iframe id="pdfViewer" ng-src="{{lessonContent}}"  frameborder="0">
                                                    </iframe>
                                                </div>
                                                <div ng-switch-when="PPT" ng-class="{'marBot45':fullScreen==true}">
                                                    <div class="loader">Loading...</div>
                                                    <iframe id="pptViewer" ng-src="{{lessonContent}}" frameborder="0">
                                                    </iframe>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <a class="left carousel-control {{carouselLeftBar}}" role="button" data-slide="prev">
                                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true" ng-click="ShowPrevLesson()">
                                        </span><span class="sr-only">Previous</span> </a>
                                     <a class="right carousel-control {{carouselRightBar}}"
                                            role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right right-arrow"
                                                aria-hidden="true" ng-click="ShowNextLesson()"></span><span class="sr-only">Next</span>
                                        </a>
                                </div>