I have a form with angular-wizard steps like below
<wizard on-finish="finishedWizard()" edit-mode="false" indicators-position="top" current-step="currentStep">
<wz-step wz-title="Unqualified">
<div class="panel-body">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 remove_padding">
<label class="control-label">Source Lead</label>
<input type="text" class="form-control input-sm clearable" ng-model="source_lead" />
</div>
</div>
</wz-step>
<wz-step wz-title="New">
<div class="panel-body">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 remove_padding">
<label class="control-label">Company</label>
<input type="text" class="form-control input-sm clearable" ng-model="company" />
</div>
</div>
</wz-step>
<wz-step wz-title="Working">
<div class="panel-body">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 remove_padding">
<label class="control-label">Title</label>
<input type="text" class="form-control input-sm clearable" ng-model="title" />
</div>
</div>
</wz-step>
<wz-step wz-title="Nurturing">
<div class="panel-body">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 remove_padding">
<label class="control-label">Rating</label>
<input type="text" class="form-control input-sm clearable" ng-model="rating" />
</div>
</div>
</wz-step>
<wz-step wz-title="Converted">
</wz-step>
<div class="panel-body">
<button type="submit" class="btn btn-sm btn-primary pull-right" wz-next ng-click="StepCompleted(currentStep)">Completed</button>
</div>
</wizard>
I want to focus to the step "New" (or "Working", or "Converted",...) instead step "Unqualified" on form load.
What can I do? Thanks in advance!
Here's what you can do. In their WizardHandler
service, we have access to functions like goTo()
(on wizard()
which is your current wizard). Like this:
$timeout(function() {
WizardHandler.wizard().goTo("Working");
});
Why inside $timeout
?
Because, if the second parameter to $timeout
i.e. delay
is not provided, the default behaviour is to execute the function after the DOM has completed rendering.
And, we need to execute this after wizard completes rendering.
Here's the working plunker
Alternatively, if you want the previous steps to be visited (visited steps look green with default styles), you can write a loop that goes next()
until we reach our desired step (in this case, Working
)