CODEWITHSUNDEEP
angularjswizard
Tommy1209
Tommy1209

Reputation: 189

angular-wizard: How to set step2 (or 3,4,..) instead step 1 on form load?

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!

Upvotes: 0

Views: 2820

Answers (2)

frank91
frank91

Reputation: 131

Change their position, if you want step "New" to be first, just set it as first.

<wizard on-finish="finishedWizard()" edit-mode="false" indicators-position="top" current-step="currentStep">
<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="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="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>

Or you can set wz-order attribute. The is order in which the steps should be in. If no order or duplicated order it will add the step to the end.

Upvotes: 2

tanmay
tanmay

Reputation: 7911

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)

Upvotes: 4

Related Questions