HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Sign-up wizard structure seems too repetitive

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
wizardtooseemsrepetitivestructuresign

Problem

I think my current structure is way too repetitive. I feel like I must be missing something that would easily make this sign up wizard work far better.

```

Step 1
Step 2
Step 3
















app.controller('registerCtrl', function($scope, $http, $location, FlashService){

$scope.step1 = {active: true, done:false, todo: false};
$scope.step2 = {active: false, done:false, todo: true};
$scope.step3 = {active: false, done:false, todo: true};

$scope.wiz = function(step){
$scope.step = step;
switch (step) {
case 'step1':
$scope.step1 = {active: true, done:false, todo: false};
$scope.step2.active = false;
$scope.step3.active = false;
$scope.step2.todo = true;
$scope.step3.todo = true;
break;
case 'step2':
$scope.step1.active = false;
$scope.step1.todo = true;
$scope.step2 = {active: true, done:false, todo: false};
$scope.step3.active = false;
$scope.step3.active = false;
break;
case 'step3':
$scope.step1.active = false;
$scope.step2.active = false;
$scope.step1.todo = true;
$scope.step2.todo = true;
$scope.step3 = {active: true, done:false, todo: false};
break
default:
$scope.step1 = {active: true, done:false, todo: false};
$scope.step2 = {active: false, done:false, todo: true};
$scope.step3 = {active: false, done:false, todo: true};
}
}

$scope.registerSubmit = function(){
$http.post()
.success(function(data, status, headers, config){
$scope.step = 'step2';

Solution

You can make this DRYer if you can assume that :

  • You keep naming each step stepx



  • No other variables in $scope start with step



In that case you could use a function that sets in a first step the right scope active and then the other steps inactive:

function updateScopeSteps( $scope , step )
{
   //Default to step1
   step = step || 'step1';
   //Set step
   $scope.step = step;
   //Activate step
   $scope[ step ] = {active: true, done:false, todo: false};
   //De-activate all other steps
   for( var name in $scope ){
     if( name.substring(0,4) == 'step' && name != step ){
       $scope[name].active = false;
       $scope[name].todo = true;
     }
   }
}

Code Snippets

function updateScopeSteps( $scope , step )
{
   //Default to step1
   step = step || 'step1';
   //Set step
   $scope.step = step;
   //Activate step
   $scope[ step ] = {active: true, done:false, todo: false};
   //De-activate all other steps
   for( var name in $scope ){
     if( name.substring(0,4) == 'step' && name != step ){
       $scope[name].active = false;
       $scope[name].todo = true;
     }
   }
}

Context

StackExchange Code Review Q#40974, answer score: 2

Revisions (0)

No revisions yet.