Multiple Dynamic Sliders on one single page

[jgw96]

From @developer-vivacity on July 20, 2017 7:12

<ion-view view-title="Info">
  <ion-content class="day-content">
    <div ng-repeat="option in pages.options" class="activity">
      <div class="a-icon"></div>
      <img src="{{option.icon}}" alt="Activity icon" /><br/>
      <div class="activity-title" ng-show="!option.free">{{option.activity_name}}</div>
      <div class="activity-title" ng-show="option.free">{{option.activity_time}}</div>
      <ion-slides options="{initialSlide: option.indexnumber, effect: 'coverflow',speed: 500,pagination: '',paginationHide : false}" slider="data.sliderDelegate" delegate-handle="{{option.activity}}" class="guide-degine">
        <ion-slide-page ng-repeat="place in option.places" class="guideinfo-slider" ng-click="slideClick({{place.place_id}})">
          <div class="box">
            <img src="{{place.place_image}}" />

            <h1 class="slider-title">{{place.place_name}}</h1>
          </div>
        </ion-slide-page>
      </ion-slides>
    </div>

  </ion-content>
  <div class="footer-section">
      <button class="btn guide-btn fixed" ng-click="saveguide()">Save</button>
  </div>
</ion-view>

.controller('EditInfoCtrl', function($scope, $ionicLoading, $location, $stateParams, $httpParamSerializerJQLike, $http) {
      var guideID = $stateParams.guideID;

      $scope.showLoading = function() {
        $ionicLoading.show({
               template: 'Loading...'
        });
      };

      $scope.hideLoading = function(){
        $ionicLoading.hide();
      };

      $scope.showLoading();

      $scope.data = {};
      $scope.pages = {};

      var link = 'http://newdev.activeadventuresabroad.com/API/Amsterdam/guide.php';
      $http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
      $http.post(link, $httpParamSerializerJQLike({ guideID : guideID, tab : 'amsterdam-info' }))

              .then(function (res){
                 $scope.hideLoading();
                 console.log('API ' + JSON.stringify(res.data));
                 $scope.pages = res.data;
              }, function(response){

      });

      var setupSlider = function() {
            //some options to pass to our slider
            $scope.data.sliderOption = {
                initialSlide: 1,
                direction: 'horizontal', //or vertical
                speed: 300, //0.3s transition
                effect: 'fade',
                pagination: '',
                paginationHide : false,
                onInit: function(swiper){
                    //swiper[0].slideTo(2);
                },
            };

            //create delegate reference to link with slider
            $scope.data.sliderDelegate = null;

           // watch our sliderDelegate reference, and use it when it becomes available
            $scope.$watch('data.sliderDelegate', function(newVal, oldVal) {
                alert($scope.data.sliderDelegate.activeIndex);

                if (newVal != null) {
                    $scope.data.sliderDelegate.on('slideChangeEnd', function(event, data) {
                        alert(data.sliderDelegate.activeIndex);

                        $scope.data.currentPage = $scope.data.sliderDelegate.activeIndex;
                        $scope.$apply();
                    });

//                    $scope.$on("$ionicSlides.slideChangeEnd", function(event, data){
//                      // note: the indexes are 0-based
//                      $scope.activeIndex = data.sliderDelegate.activeIndex;
//                      alert($scope.activeIndex);
//                      $scope.previousIndex = data.sliderDelegate.previousIndex;
//                    });
                }
            });

      };

      setupSlider();

      $scope.slideClick = function(postId) {
          $location.path("/activity/" + postId);
      }

      $scope.saveguide = function(){
         alert('test');
         //setupSlider();
         // var log = [];
         $scope.$watch('data.sliderDelegate', function(newVal, oldVal) {
              alert($scope.data.sliderDelegate.activeIndex);
         });
         //($ionicSlideBoxDelegate.$getByHandle('activity0').currentIndex());
         //alert($ionicSlideBoxDelegate.$getByHandle('activity1').currentIndex());
          //console.log($scope.data.sliderDelegate);
//          angular.forEach($scope.data.sliderDelegate, function(value, key) {
//             // alert(key + ': ' + value);
//              console.log(key);
//          }, log);
      }
})

I have multiple dynamic sliders on a single page. I want to define separate instances for each slider so I can get active index on click event after chnaging slides for each slider so please help me. Above is my code

Copied from original issue: ionic-team/ionic#12414