ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
50.94k stars 13.52k forks source link

Ignore a slide #4287

Closed kapil019 closed 8 years ago

kapil019 commented 9 years ago

Can i ignore a slide in slide box.

I have a slde that show after login, So i have added condition like

<ion-slide ng-if="isUserLoggedin">
----------
SLIDE content
---------
</ion-slide>

But this is not working, I can not remove this slide, because after login i need to show this. So is there any way to ignore a slide?

clnhll commented 8 years ago

I had this problem, to fix it I made a totally separate slide box with all the same slides, minus the one I wanted to hide. so like

    <ion-slide-box ng-show="showThirdSlide">
        <ion-slide>First</ion-slide>
        <ion-slide>Second</ion-slide>
        <ion-slide>Third</ion-slide>
    </ion-slide-box>
    <ion-slide-box ng-hide="showThirdSlide">
        <ion-slide>First</ion-slide>
        <ion-slide>Second</ion-slide>
    </ion-slide-box>

Doing this gives you a console error every time you change slides because of the hidden slide box unfortunately, but it works. Would love a better fix.

mlynch commented 8 years ago

I'm going to close since I don't know if this needs to be backed in, but you should be able to do it by trying something like:

Hey everyone, we just landed a new slider component that solves this issue. It's in master and will be in 1.2 To use it today, do this:

Will be back porting the delegate to work with it soon, but going to close since this should be solved now.

<ion-slides options="options" slider="data.slider">
  <ion-slide-page ng-repeat="slide in slides" ng-hide="slide.hidden">
  </ion-slide-page>
</ion-slides>

and your JS:

controller('MyCtrl', function($scope) {
      $scope.options = {
        loop: true
      }

      $scope.data = {};

      $scope.$watch('data.slider', function(nv, ov) {
        $scope.slider = $scope.data.slider;
      })

      $timeout(function() {
        $scope.slides[0].hide = true;
        $scope.slider.update();
      })

});