angular-step example

An example of how to use angular-step.

by Austin Keeley

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<div id="content" style="margin: 20px">
    <stepset next-text="Next" previous-text="Previous" submit-text="Submit" submit-action="testSubmit">
        <form>
            <step title="Select your size">
                <div class="control-group">
                    <div class="controls">
                        <label class="radio" for="size-0">
                            <input name="size" id="size-0" value="Small" checked="checked" type="radio">Small</label>
                        <label class="radio" for="size-1">
                            <input name="size" id="size-1" value="Medium" type="radio">Medium</label>
                        <label class="radio" for="size-2">
                            <input name="size" id="size-2" value="Large" type="radio">Large</label>
                        <label class="radio" for="size-3">
                            <input name="size" id="size-3" value="Extra Large" type="radio">Extra Large</label>
                    </div>
                </div>
            </step>
            <step title="Select your toppings">
                <div class="control-group">
                    <div class="controls">
                        <label class="checkbox" for="toppings-0">
                            <input name="toppings" id="toppings-0" value="Pepperoni" type="checkbox">Pepperoni</label>
                        <label class="checkbox" for="toppings-1">
                            <input name="toppings" id="toppings-1" value="Extra Cheese" type="checkbox">Extra Cheese</label>
                        <label class="checkbox" for="toppings-2">
                            <input name="toppings" id="toppings-2" value="Mushrooms" type="checkbox">Mushrooms</label>
                        <label class="checkbox" for="toppings-3">
                            <input name="toppings" id="toppings-3" value="Green Pepper"...

JavaScript

/*
 * app.js
 * An example app that uses the angularjs step.
 */

var app = angular.module('testStep', ['angular.step']);

app.run(function ($rootScope) {
    $rootScope.testSubmit = function () {
        alert("You clicked submit.");
    };
});


/**
 * @ngdoc overview
 * @name angular-step
 *
 * @description
 * An AngularJS way of building clean "wizard" like applications.
 */

angular.module('angular.step', [])

    .controller('StepSetController', ['$scope', function ($scope) {

    var ctrl = this,
        index = -1, // points to the current step in the steps array
        steps = ctrl.steps = $scope.steps = [];

    $scope.nextEnabled = true;
    $scope.previousEnabled = false;
    $scope.submitEnabled = false;

    /*
     * Moves to the next step
     */
    $scope.next = function () {
        if (steps.length === 0) {
            console.debug('No steps provided.');
            return;
        }
        // If we're at the last step, then stay there.
        if (index == steps.length - 1) {
            console.debug('At last step.');
            return;
        }

        steps[index++].isDisplayed = false;
        steps[index].isDisplayed = true;

        ctrl.setButtons();
    }; // $scope.next

    /*
     * Moves to the previous step
     */
    $scope.previous = function () {
        if (steps.length === 0) {
            console.debug('No steps provided.');
            return;
        }

        if (index === 0) {
            console.debug('At first step');
            return;
        }
        steps[index--].isDisplayed = false;
        steps[index].isDisplayed = true;
        ctrl.setButtons();
    }; // $scope.previous

    $scope.submit = function () {
        $scope.submitAction();
    };

    /*
     * Adds a step to the end of the step list and
     * sets the index to 0 if it's the first step added.
     */
    ctrl.addStep = function (obj) {
        ctrl.steps.push(obj);
        if (index == -1) {
            index = 0;
           ...