angular-向导：如何在表单加载时设置第 2 步（或 3,4,..）而不是第 1 步？

Question

我有一个带有 angular 向导步骤的表单，如下所示

<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>

我想专注于步骤 "New"（或 "Working"，或 "Converted"，...），而不是表单加载时的步骤 "Unqualified"。

我能做什么？提前致谢！

Answer 1

改变他们的位置，如果你想让第"New"步在第一个，就把它设置为第一个。

<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>

或者您可以设置 wz-order 属性。步骤的顺序。如果没有顺序或重复顺序，它将把步骤添加到最后。

Answer 2

您可以执行以下操作。在他们的 WizardHandler service 中，我们可以访问 goTo() 等功能（在 wizard() 上，这是您当前的向导）。像这样：

$timeout(function() {
    WizardHandler.wizard().goTo("Working");
});

为什么在$timeout里面？

因为，如果没有提供$timeout的第二个参数即delay，默认行为是执行[=43之后的函数=] 已完成渲染。

并且，我们需要在向导完成渲染后执行此操作。

这是working plunker

或者，如果你想访问前面的步骤（访问过的步骤看起来是绿色的，默认样式)，你可以写一个循环 next() 直到我们到达我们想要的步骤（在本例中，Working）

angular-向导：如何在表单加载时设置第 2 步（或 3,4,..）而不是第 1 步？

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

wizard

angularjs