Slide Wizard Gists

app.js

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

    .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
  })

  .state('app.wizard', {
    url: '/wizard',
    views: {
      'menuContent': {
        templateUrl: 'templates/wizard.html',
        controller: 'WizardCtrl'
      }
    }
  });
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/wizard');
});

footer-snip.html

</ion-content>
  <ion-footer-bar>
    <div class="bar bar-footer">
      <div class="row">
        <div class="col-25">
          <button class="button icon-left ion-chevron-left button-calm" ng-click="back()">
            Back
          </button>
        </div>
        <div class="col-50">
          <div style="text-align: center">
            Step {{slide+1}} of 6
          </div>
        </div>
        <div class="col-25">
          <button class="button icon-right ion-chevron-right button-calm" style="float: right;" ng-click="next()">
            Next
          </button>
        </div>
      </div>
    </div>
  </ion-footer-bar>

scope-functions.js

$scope.next = function(){
    $ionicSlideBoxDelegate.next();
  }
  $scope.back = function(){
    $ionicSlideBoxDelegate.previous();
  }

  $scope.slide = -1;
  $scope.slides = [];
  $timeout(function(){
    $scope.$watch(function(){
        return $ionicSlideBoxDelegate.currentIndex();
    }, function(index){

      $scope.errorMessage = "";

      //Initial state, don't validate
      if($scope.slide < 0){
        $scope.slide = 0;
        return;
      }

      if($scope.slides[$scope.slide].isValid()){
        $scope.slide = index;
        return;
      } else {
        $ionicSlideBoxDelegate.slide($scope.slide);
        $scope.errorMessage = $scope.slides[$scope.slide].errorMessage;
      }

    });
  },0);

scope-slides.js

  //Setup the slides
  $scope.slide1 = new Slide();
  $scope.slide1.validators.push(function(){
    return $scope.slide1.firstName && $scope.slide1.firstName.length != 0;
  });
  $scope.slide1.validators.push(function(){
    return $scope.slide1.lastName && $scope.slide1.lastName.length != 0;
  });
  $scope.slide1.errorMessage = "Please enter your name!";
  $scope.slides.push($scope.slide1);

  $scope.slide2 = new Slide();
  $scope.slide2.validators.push(function(){
    return $scope.slide2.quest && $scope.slide2.quest.length != 0;
  });
  $scope.slide2.errorMessage = "Choose a quest!";
  $scope.slides.push($scope.slide2);

  $scope.slide3 = new Slide();
  $scope.slide3.validators.push(function(){
    return $scope.slide3.color && $scope.slide3.color.length != 0;
  });
  $scope.slide3.errorMessage = "Please choose a color";
  $scope.slides.push($scope.slide3);

  $scope.slide4 = new Slide();
  $scope.slide4.validators.push(function(){
    return $scope.slide4.african || $scope.slide4.european;
  });
  $scope.slide4.errorMessage = "Choose an air speed!";
  $scope.slides.push($scope.slide4);

  $scope.slide5 = new Slide();
  $scope.slide5.validators.push(function(){
    return $scope.slide5.love > 50;
  });
  $scope.slide5.errorMessage = "You don't love kittens enough!";
  $scope.slides.push($scope.slide5);

slide-object-snip.js

var Slide = function(){
  this.validators = [];
  this.errorMessage = "Something went wrong!";
}
Slide.prototype.isValid = function(){
  if(this.validators.length == 0){
    return true;
  }
  for (var i=0; i < this.validators.length; i++){
    if(!this.validators[i]()){
      return false;
    }
  }
  return true;
}

slidebox-init.html

<ion-view view-title="Slide Wizard">
  <ion-content>
    <ion-slide-box show-pager="false">
      <ion-slide>
        <div class="box">
          <h1>Slide 1</h1>
        </div>
      </ion-slide>
      <ion-slide>
        <div class="box">
          <h1>Slide 2</h1>
        </div>
      </ion-slide>
      <ion-slide>
        <div class="box">
          <h1>Slide 3</h1>
        </div>
      </ion-slide>
    </ion-slide-box>
  </ion-content>
</ion-view>

validation-snip.html

<ion-view view-title="Slide Wizard">
  <ion-content has-footer="true">
    <div class="card" style="color: red; text-align: center;" ng-show="errorMessage">
      {{errorMessage}}
    </div>
    <ion-slide-box show-pager="false" deletgate-handle="wizard">
      <ion-slide>

wizard.html

<ion-view view-title="Slide Wizard">
  <ion-content has-footer="true">
    <div class="card" style="color: red; text-align: center;" ng-show="errorMessage">
      {{errorMessage}}
    </div>
    <ion-slide-box show-pager="false" deletgate-handle="wizard">
      <ion-slide>
        <div class="box">
          <h1>What is your name?</h1>
          <div class="list">
            <label class="item item-input">
              <input type="text" placeholder="First Name" ng-model="slide1.firstName">
            </label>
            <label class="item item-input">
              <input type="text" placeholder="Last Name" ng-model="slide1.lastName">
            </label>
          </div>
        </div>
      </ion-slide>
      <ion-slide>
        <div class="box">
          <h1>What is your quest?</h1>
          <div class="list">
            <label class="item item-input item-select">
              <div class="input-label">
                Quests
              </div>
              <select ng-model="slide2.quest">
                <option ng-repeat="quest in quests" value="{{quest}}">{{quest}}</option>
              </select>
            </label>
          </div>
        </div>
      </ion-slide>
      <ion-slide class="box">

          <h1>What is your favorite color?</h1>
          <ion-radio value="{{color}}" ng-model="slide3.color" style="color: {{color}}; text-align:left;" ng-repeat="color in colors">
            {{color}}
          </ion-radio>
      </ion-slide>
      <ion-slide>
        <div class="box">
          <h1>What is the airspeed velocity of an unladen swallow?</h1>
          <ion-toggle ng-model="slide4.african" toggle-class="toggle-royal" style="text-align: left;"> African </ion-toggle>
          <ion-toggle ng-model="slide4.european" toggle-class="toggle-royal" style="text-align: left;"> European </ion-toggle>
        </div>
      </ion-slide>
      <ion-slide>
        <div class="box">
          <h1>How much do you love kittens?</h1>
          <div class="item range">
            <i class="icon ion-heart-broken"></i>
            <input type="range" min="0" max="100" value="33" ng-model="slide5.love" />
            <i class="icon ion-heart"></i>
          </div>
        </div>
      </ion-slide>
      <ion-slide>
        <div class="box">
          <h1>FINAL SCORE!</h1>
          <div class="card" ng-repeat="slide in slides">
            <div class="item item-divider">
              Slide {{$index+1}}
            </div>
            <div class="item item-text-wrap">
              {{slide}}
            </div>
          </div>
        </div>
      </ion-slide>
    </ion-slide-box>

  </ion-content>
  <ion-footer-bar>
    <div class="bar bar-footer">
      <div class="row">
        <div class="col-25">
          <button class="button icon-left ion-chevron-left button-calm" ng-click="back()">
            Back
          </button>
        </div>
        <div class="col-50">
          <div style="text-align: center">
            Step {{slide+1}} of 6
          </div>
        </div>
        <div class="col-25">
          <button class="button icon-right ion-chevron-right button-calm" style="float: right;" ng-click="next()">
            Next
          </button>
        </div>
      </div>
    </div>
  </ion-footer-bar>
</ion-view>