patternjavascriptMinor
Sign-up wizard structure seems too repetitive
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';
```
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 :
In that case you could use a function that sets in a first step the right scope active and then the other steps inactive:
- You keep naming each step
stepx
- No other variables in
$scopestart withstep
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.