AngularJS MultiStep Form

by Lore ZZ

HTML

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>

<div class="content" ng-controller="RegisterCtrl">

  <form class="form-horizontal">

    <ul class="nav nav-tabs">
      <li ng-repeat="step in steps" ng-class="{active: $index==getCurrentStepIndex()}">
        <a href="javascript:void(0)" ng-click="goToStep($index)">{{step}}</a>
      </li>
    </ul>
    <div ng-switch on="selection">

      <!-- First Step -->
      <div ng-switch-when="Info Struttura">
        <h4 class='center'>
        Informazioni sulla struttura
        </h4>
        <!-- -->
        <div class="row">
          <div class="span4">

            <div class="control-group">
              <label class="control-label" for="teamName">Numero camere </label>
              <div class="controls">
                <input type="text" id="teamName" placeholder="numero di camere delal struttura" />
              </div>
            </div>
            <div class="control-group">
              <label class="control-label" for="inputEmail">Tipo Struttura</label>
              <div class="controls">
                <select>
                  <option selected>Struttura Alberghiera</option>
                  <option>Ristorante</option>
                  <option>Spa - Palestra</option>
                  <option>Altro...</option>
                </select>
              </div>
            </div>
            <div class="control-group">
              <label class="control-label" for="inputPassword">Nome Struttura</label>
              <div class="controls">
                <input type="text" id="inputPassword" placeholder="Nome Struttura">
              </div>
            </div>
    ...

CSS

.content {
  margin: 10px 0 0 10px;
}

JavaScript

// Declare app level module which depends on filters, and services
var app = angular.module('myApp', []);

function RegisterCtrl($scope, $location) {

  $scope.step1 = "Info Struttura";
  $scope.step2 = "Servizi";
  $scope.step3 = "Offerta";

  $scope.steps = [
    'Info Struttura',
    'Servizi',
    'Offerta'
  ];
  $scope.selection = $scope.steps[0];

  $scope.getCurrentStepIndex = function() {
    // Get the index of the current step given selection
    return _.indexOf($scope.steps, $scope.selection);
  };

  // Go to a defined step index
  $scope.goToStep = function(index) {
    if (!_.isUndefined($scope.steps[index])) {
      $scope.selection = $scope.steps[index];
    }
  };

  $scope.hasNextStep = function() {
    var stepIndex = $scope.getCurrentStepIndex();
    var nextStep = stepIndex + 1;
    // Return true if there is a next step, false if not
    return !_.isUndefined($scope.steps[nextStep]);
  };

  $scope.hasPreviousStep = function() {
    var stepIndex = $scope.getCurrentStepIndex();
    var previousStep = stepIndex - 1;
    // Return true if there is a next step, false if not
    return !_.isUndefined($scope.steps[previousStep]);
  };

  $scope.incrementStep = function() {
    if ($scope.hasNextStep()) {
      var stepIndex = $scope.getCurrentStepIndex();
      var nextStep = stepIndex + 1;
      $scope.selection = $scope.steps[nextStep];
    }
  };

  $scope.decrementStep = function() {
    if ($scope.hasPreviousStep()) {
      var stepIndex = $scope.getCurrentStepIndex();
      var previousStep = stepIndex - 1;
      $scope.selection = $scope.steps[previousStep];
    }
  };
}