AngularJS MultiStep Form

by ian_smithz

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="Step 1: Team Info">
      <div class="row">
        <div class="span4">
          <div class="control-group">
            <label class="control-label" for="teamName">Team Name</label>
            <div class="controls">
                <input type="text" id="teamName" placeholder="Team Name" />
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="inputEmail">Email</label>
            <div class="controls">
                <input type="text" id="inputEmail" placeholder="Email" />
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="inputPassword">Password</label>
            <div class="controls">
              <input type="password" id="inputPassword" placeholder="Password">
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="confirmInputPassword">Confirm Password</label>
            <div class="controls">
              <input type="password" id="confirmInputPassword" placeholder="Password">
            </div>
          </div>
        </div>
        <div class="span4 offset1">

          <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.steps = [
    'Step 1: Team Info',
    'Step 2: Campaign Info',
    'Step 3: Campaign Media'
  ];
  $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];
    }
  };
}