Basic Wizard Example
Start
Hey guys, welcome to the wizard :). If you want to check out the documentation on how to use it, please click here.
This step is an example of using canexit validation. Here we will use a promise with a timeout to simulate an async server call. Give the wizard 1 second to progress after clicking next!
Otherwise, let's continue with the wizard. Please click here to continue
Liking it
You're now in the second step of this wizard.
This step is an example of using canexit validation with no server call, toggle the value to true or false using the button below to see an example of being allowed to exit and being restricted.
Value is currently: {{canExit}}More steps
Click on the bottom navigation on Liking it to go back to that step for example
Even More steps
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nunc arcu, sodales nec molestie ut, posuere vitae justo. Praesent sed lectus nisi. Maecenas fringilla fermentum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nunc arcu, sodales nec molestie ut, posuere vitae justo. Praesent sed lectus nisi. Maecenas fringilla fermentum volutpat.
Sup?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nunc arcu, sodales nec molestie ut, posuere vitae justo. Praesent sed lectus nisi. Maecenas fringilla fermentum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nunc arcu, sodales nec molestie ut, posuere vitae justo. Praesent sed lectus nisi. Maecenas fringilla fermentum volutpat.
Finish him
Finally this ends! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nunc arcu, sodales nec molestie ut, posuere vitae justo. Praesent sed lectus nisi. Maecenas fringilla fermentum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nunc arcu, sodales nec molestie ut, posuere vitae justo. Praesent sed lectus nisi. Maecenas fringilla fermentum volutpat.
ngRepeat Wizard Example
{{step.title}}
{{step.content}}
Add and remove steps to ngRepeat
{{step.title}} Click To Remove
Custom Step Order Wizard Example
First Step in HTML
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nunc arcu, sodales nec molestie ut, posuere vitae justo. Praesent sed lectus nisi. Maecenas fringilla fermentum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nunc arcu, sodales nec molestie ut, posuere vitae justo. Praesent sed lectus nisi. Maecenas fringilla fermentum volutpat.
Second Step in HTML
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nunc arcu, sodales nec molestie ut, posuere vitae justo. Praesent sed lectus nisi. Maecenas fringilla fermentum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nunc arcu, sodales nec molestie ut, posuere vitae justo. Praesent sed lectus nisi. Maecenas fringilla fermentum volutpat.
Third Step in HTML
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nunc arcu, sodales nec molestie ut, posuere vitae justo. Praesent sed lectus nisi. Maecenas fringilla fermentum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nunc arcu, sodales nec molestie ut, posuere vitae justo. Praesent sed lectus nisi. Maecenas fringilla fermentum volutpat.
Fourth Step in HTML
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nunc arcu, sodales nec molestie ut, posuere vitae justo. Praesent sed lectus nisi. Maecenas fringilla fermentum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nunc arcu, sodales nec molestie ut, posuere vitae justo. Praesent sed lectus nisi. Maecenas fringilla fermentum volutpat.
HTML for Custom Step Order Wizard
<wizard on-finish="finished()" indicators-position="bottom" name="customOrderWizard">
<wz-step wz-title="STEP 3" wz-order="3">
<h3>First Step in HTML</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nunc arcu, sodales nec molestie ut, posuere vitae justo. Praesent sed lectus nisi. Maecenas fringilla fermentum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nunc arcu, sodales nec molestie ut, posuere vitae justo. Praesent sed lectus nisi. Maecenas fringilla fermentum volutpat. </p>
<input type="submit" wz-next value="NEXT"/>
</wz-step>
<wz-step wz-title="STEP 1" wz-order="1">
<h3>Second Step in HTML</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nunc arcu, sodales nec molestie ut, posuere vitae justo. Praesent sed lectus nisi. Maecenas fringilla fermentum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nunc arcu, sodales nec molestie ut, posuere vitae justo. Praesent sed lectus nisi. Maecenas fringilla fermentum volutpat. </p>
<input type="submit" wz-next value="NEXT"/>
</wz-step>
<wz-step wz-title="STEP 4" wz-order="4">
<h3>Third Step in HTML</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nunc arcu, sodales nec molestie ut, posuere vitae justo. Praesent sed lectus nisi. Maecenas fringilla fermentum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nunc arcu, sodales nec molestie ut, posuere vitae justo. Praesent sed lectus nisi. Maecenas fringilla fermentum volutpat. </p>
<input type="submit" wz-next value="NEXT"/>
</wz-step>
<wz-step wz-title="STEP 2" wz-order="2">
<h3>Fourth Step in HTML</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nunc arcu, sodales nec molestie ut, posuere vitae justo. Praesent sed lectus nisi. Maecenas fringilla fermentum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nunc arcu, sodales nec molestie ut, posuere vitae justo. Praesent sed lectus nisi. Maecenas fringilla fermentum volutpat. </p>
<input type="submit" wz-next value="NEXT"/>
</wz-step>
</wizard>