Conditionally render ion-slide/ion-wizard-step

[niyando]

Firstly, thanks for providing this nifty way of working with ionic slide box. Great plugin to have.

I am conditionally rendering ion-wizard-step using following

      <ion-slide ion-wizard-step ng-if="options.something"  next-condition="options.something_else">
      </ion-slide>

using ng-if on ion-slide works well when its false. When its true, it messes up the next-condition (button is disabled even when condition is true). Using ng-if on a parent tag like <div> renders a blank slide. Using ng-show works correctly when its true but things fall apart when it is false.

Is there an appropriate way to conditionally render an ion-slide ion-wizard-step ?

As an alternative, It can be also helpful to have ion-wizard-skip-step that would skip the step when doing next/prev over looking next/prev conditions.

Thanks

[arielfaur]

I will try to look into that as soon as I find time. It's been busy lately!

[niyando]

Could you pin point where I could start looking? .. would be happy to contribute.

[arielfaur]

I fixed the issue. Could you please download the ion-wizard.js from here and replace it in your project? It should work with ng-if now. Let me know if it works for you. Then I will build a new release.

[niyando]

I will try this and let you know. Thnx @arielfaur :+1:

[niyando]

Hey, this didn't fix the issue. However, I was able to reproduce the issue in this Plunker

if you check intro.html slide 2 has been marked as ng-if="false" this doesn't render the slide 2 which is correct but it messes up the next-condition check for slide 3.

remove ng-if="false" on slide 2 to see the validation working on screen 3. Hope this helps.

[arielfaur]

You are right. I have tried your use case and it still doesn't work. I'll look into it, thanks!

[niyando]

Ok. thanks :+1:

[jeffet]

Hi Is there any chance that this enhancement was created? I am looking for a way to conditionally display specific slides via the wizard. Thanks!

[johnhearn]

Is there a workaround for this in the meantime? I just need to skip a step given a specific condition.

[arielfaur]

@johnhearn I don't have time to maintain these modules for Ionic 1, I am focused on Ionic 2 now. The feature you request is not implemented. You would have to modify the plugin. It should be easy though!

[niyando]

@johnhearn, this is how I managed to get it work. Check for the sample code below.

parent container for slides

  <ion-view hide-nav-bar="true">
    <ion-slide-box show-pager="false" ion-wizard on-slide-changed="changePage($index)">
      <ion-slide ion-wizard-step ng-repeat="step in page.steps | filter:{skip:'!true'} track by step.view" ui-view="{{step.view}}">
      </ion-slide>
    </ion-slide-box>
  </ion-view>

controller code

  $scope.page = {};
  $scope.page.steps = [
    {view:"step_one"},
    {view:"step_two"},
    {view:"step_three"},
    {view:"step_four"},
    {view:"step_five"}
  ];

  var all_steps_by_name = $scope.page.steps.map(function(e){
    return e.view;
  });

  function getStepIndex(viewname){
    return all_steps_by_name.indexOf(viewname);
  }

  $scope.changePage = function(i){
    $scope.page.curr_index = i;
  }

  $scope.changePage(0); //init

  // performance - render only current slide
  $scope.showSlide =function(i){
    return (Math.abs(i - $scope.page.curr_index) < 1);
  }

  // got to next slide
  $scope.page.next = function(){
    $ionicSlideBoxDelegate.next();
    return true;
  }

  // update slidebox
  $scope.page.updateSteps = function(){
    $ionicSlideBoxDelegate.update();
  }

  // critical to update slidebox after changing properties of steps
  $scope.$watch('page.steps',function(){
    $scope.page.updateSteps();
    $timeout(function(){
      $scope.page.updateSteps();
    }, 500);
  },true);

  //conditionally render steps
  $scope.page.steps[getStepIndex("step_two")].skip = true;
  $scope.page.steps[getStepIndex("step_four")].skip = Math.random() >= 0.5;

sample and general html for steps (step_one.html)

<ion-wizard-content>
  <div ng-if="showSlide($index)">
    <div>
      <p>content</p>
    </div>
    <div class="padding">
      <button class="button button-block" ng-click="page.next()">
        Next
      </button>
    </div>
  </div>
</ion-wizard-content>

states structure

  .state('container', {
    url: '/xyz',
    abstract: true,
    views: {
      'menuContent': {
        templateUrl: 'templates/container.html',
        controller: 'ContainerCtrl'
      }
    }
  })

  .state('container.steps',{
    url: '',
    views: {
      'step_one':{
        templateUrl: 'templates/step_one.html'
      },
      'step_two':{
        templateUrl: 'templates/step_two.html',
        controller: 'StepTwoCtrl'
      }
      // likewise ...
    }
  })

Hope this helps.