イオンの現在のスライドのインデックスを取得する方法は？

Question

初心者ここに..イオンスライドを使って、対応するカード番号のカードセットを表示しています。私は現在のイオンスライドのインデックスを取得しようとしているが、現在私のアプリは空白の画面を表示しています。ここに私のHTMLコードです：

<ion-view title="Main Menu" id="page1"> 

    <ion-content padding="true" class="has-header" scroll="false"> 
     <ion-slides on-slide-changed="slideHasChanged($index)" disable-side-menu-drag="" options="{'loop': false}" slider="slider1" delegate-handle="slider1" id="mainMenu-slider1" style="width:100%;height:270px;"> 
     <ion-slide-page ng-repeat="card in cardNumbers" id="mainMenu-slide24" style="background:url(&quot;{{card.cardImage}}&quot;) no-repeat center;background-size:cover;"><br><br><br><br><br><br><br><br><br><br> 
      <h5>Card Number:{{card.card}}</h5> 
      <p> 
       <h5>Balance:</h5> 
     </ion-slide-page> 
     </ion-slides> 
     <ion-slides options="options" slider="slider2"> 
     <ion-slide-page id="mainMenu-slide27" style="height:400px;background-color:#d8dde6;" disable-scroll="false">1 
      <h5 align="center">Transaction History</h5> 
      <p> 
       <div class="col text-center"> 
        <button id="mainMenu-button9" class="button button-dark">View Transaction History</button> 
       </div> 
      </p> 
     </ion-slide-page> 
     <ion-slide-page id="mainMenu-slide28">2 
      <div class="spacer" style="width: 300px; height: 20px;"></div> 
      <button id="mainMenu-button5" class="button button-positive button-block">Cards</button> 
      <button id="mainMenu-button6" class="button button-positive button-block">Nearby CICOs</button> 
      <button id="mainMenu-button7" class="button button-positive button-block">FAQ</button> 
      <button id="mainMenu-button8" class="button button-positive button-block">Contact Us</button> 
     </ion-slide-page> 
     </ion-slide> 
    </ion-content> 

</ion-view> 

とここに私のcontroller.jsコードです：あなたはこれを聞くために使用されているスライドを変更すると、その後

angular.module('app.controllers', []) 

    .controller('mainMenuCtrl', ['$scope', '$stateParams', '$ionicSlideBoxDelegate', function($scope, $stateParams, $ionicSlideBoxDelegate, sendCardNumService) { 

     $scope.cardNumbers = [{ 
     card: "12345", 
     cardImage: "img/card1.png" 
     }, { 
     card: "678910", 
     cardImage: "img/card2.png" 
     }, { 
     card: "111213", 
     cardImage: "img/card3.png" 
     }] 

     $scope.currentCardNum = {} 

     $scope.slideHasChanged = function($index) { 
     $scope.currentCardNum = cardNumbers[$index].card; 
     } 

     $scope.setCurrentCardNum = function() { 
     sendCardNumService.sendCardNo($scope.currentCardNum); 
     } 

     $scope.options = { 
     direction: 'vertical', 
     slidesPerView: '1', 
     pagination: false, 
     initialSlide: 1, 
     showNavButtons: false 
     }; 

     $scope.goToHistory = function(cardNum) { 
     $location.path('/page5'); 
     } 

    }]) 

Answer 1

まずスライドを聴く初期化

$scope.$on("$ionicSlides.sliderInitialized", function(event, data){ 
    $scope.slider = data.slider; 
    //first slide loads here 
    $scope.activeIndex = data.slider.activeIndex; 
    console.log($scope.activeIndex); //will return 0 
}); 

スライド変更へ

$scope.$on("$ionicSlides.slideChangeStart", function(event, data){ 
    $scope.activeIndex = data.slider.activeIndex; 
    console.log($scope.activeIndex); //will return the current index of your slide 
} 

内部であなたの関数を呼び出すことができます関数

Answer 2

これは私にとってはうまくいきました。私のcontroller.jsコード：

$scope.options1 = { 
    initialSlide: 0, 
    onInit: function(slider1) 
    { 
     $scope.slider1 = slider1; 
    }, 
    onSlideChangeEnd: function(slider1) 
    { 
     console.log('The active index is ' + slider1.activeIndex); 
     $scope.currentIdx = slider1.activeIndex; 
    } 

};