troch / angular-multi-step-form

An angular module for creating multi step forms / wizards
http://troch.github.io/angular-multi-step-form
ISC License
144 stars 44 forks source link

Is it possible to save data with a searchId ? #65

Open shroux opened 7 years ago

shroux commented 7 years ago

Hi, I need to create a multiple-step-form with browser navigation (search-id) while saving data. Is it possible with angular-multi-step-form ?

I tried to mix both example of the website (Saving data and Browser navigation) but the multiStepFormScope reset everytime I change step.

is there a way to make it work ?

Controller:

app.controller('IsolatedStepCtrl', ['$scope', 'multiStepFormScope', function ($scope, multiStepFormScope) {
    $scope.model = angular.copy(multiStepFormScope.model);
    $scope.$on('$destroy', function () {
        multiStepFormScope.model = angular.copy($scope.model);
    });
    }
]);

app.controller('crystalCreationController', function($rootScope, $scope) {
    $scope.model = {};
    $scope.steps = [
        {
            template: '<input type="text" ng-model="model.firstName" name="firstName" class="form-control" placeholder="Enter your first name">',
            hasForm: true
        },
        {
            template: '<input type="text" ng-model="model.lastName" name="lastName" class="form-control" placeholder="Enter your last name">',
            hasForm: true,
            isolatedScope: true,
            controller: 'IsolatedStepCtrl'
        }
    ];
});

View:

<multi-step-container steps="steps" class="simple-prev-next" search-id="'step'">
    <header>
        <button ng-disabled="$isFirst()" class="btn btn-default" ng-click="$previousStep()">
            <span class="fa fa-chevron-left"></span>
            Previous
        </button>

        <strong ng-bind-template="{{$getActiveIndex()}} / {{$getSteps().length}}"></strong>

        <button ng-disabled="$isLast()" class="btn btn-default" ng-click="$nextStep()">
            Next
            <span class="fa fa-chevron-right"></span>
        </button>
    </header>

    <main step-container></main>
</multi-step-container>

Thanks ! Gilles.