JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="test" ng-controller="RegisterCtrl">
<form name="myForm" 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" name="email" id="inputEmail" placeholder="Email" ng-model="email" email required>
<span ng-show="myForm.email.$error.email" class="help-inline">Email invalid</span>
<span ng-show="myForm.email.$error.required" class="help-inline">Email required</span>
</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...
CSS
.test {
font-family:"Times New Roman", Times, serif;
font-style:italic;
}
JavaScript
// Declare app level module which depends on filters, and services
var app = angular.module('myApp', []);
app.directive('email', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function(viewValue) {
if(viewValue && viewValue.match(/[a-z0-9\-_]+@[a-z0-9\-_]+\.[a-z0-9\-_]{2,}/)) {
// it is valid
ctrl.$setValidity('email', true);
return viewValue;
} else {
// it is invalid, return undefined (no model update)
ctrl.$setValidity('email', false);
return undefined;
}
});
}
};
});
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(form) {
if (form.$invalid) return;
if ( $scope.hasNextStep() )
{
var stepIndex =...