Logic for the Next button for the questionnaire?

Question

I am beginner in AngularJS and facing some issues. I am trying to make a questionnaire having 1 question on each page. On every Next button data is save in the database. I am trying to make a Next button logic but couldn't get an idea how to make a generic NEXT button logic which enables next field using ng-show, disables the current one and lastly store the current value of field in database. Can someone help to make a logic for Next button that will enable next div show on next page and also store data in Database?

HTML Code:

<div class="container">
 <div class="row-fluid">
    <section class="col-md-12 well">
        <h1><i class="fa fa-key"></i>User Creation</h1>
        <hr />
        <form class="form-horizontal">
            <div class="alert alert-info" role="alert">
                <strong><i class="fa fa-info-circle"></i> Basic Information </strong>
            </div>
            <div class="form-group" ng-show="firstNameDiv">
                <label class="col-sm-2 control-label" for="firstName">First Name</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="firstName" placeholder="First Name" ng-model="user.firstName" required />
                </div>
            </div>
             <div class="form-group" ng-show="middleNameDiv">
                <label class="col-sm-2 control-label" for="middleName">Middle Name</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="middleName" placeholder="Middle Name" ng-model="user.middleName" />
                </div>
            </div>
             <div class="form-group" ng-show="lastNameDiv">
                <label class="col-sm-2 control-label" for="lastName">Last Name</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="lastName" placeholder="Last Name" ng-model="user.lastName" />
                </div>
            </div>
            <div class="form-group" ng-show="genderDiv">
                <label class="col-sm-2 control-label" for="gender">Gender</label>
                <div class="col-sm-10">
                    <div class="radio">
                        <label><input type="radio" name="male" ng-model="user.gender">Male</label>
                    </div>
                    <div class="radio">
                        <label><input type="radio" name="female" ng-model="user.gender" disabled>Female</label>
                    </div>
                </div>
            </div>
            <div class="form-group" ng-show="ageDiv">
                <label class="col-sm-2 control-label" for="age">Age</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="age" placeholder="Age" ng-model="user.age" />
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <a href="#" class="btn btn-default"><i class="fa fa-arrow-circle-left"></i> Back</a>
                    <a href="#" class="btn btn-default"><i class="fa fa-arrow-circle-left" ng-click="next()"></i> Next</a>
                </div>
            </div>
        </form>
    </section>
</div>

Javascript: UserController.js

(function () {
'use strict';

angular.module('myApp').controller('UserCtrl', function ($scope, $rootScope,   $routeParams, $sanitize, $location, UserSrv) {
    // loading variable to show the spinning loading icon
    $scope.loading = false;

    $scope.init = function() {
        $scope.firstNameDiv = true;
        $scope.middleNameDiv = false;
        $scope.lastNameDiv = false;
        $scope.genderDiv = false;
        $scope.ageDiv = false;
    };
    // runs once per controller instantiation
    $scope.init();

    $scope.next = function() {
        $scope.firstNameDiv = false;
        // Call User service with firstNameDiv value.
        UserSrv.saveData();
        $scope.middleNameDiv = true;
        // Logic to enable next field and save the current field value 
        // ???
    }
});
}());

Answer 1

You could create a multi-step form (also known as Wizard). For this purpose why not using Angular ui-router as suggested in this post:

https://scotch.io/tutorials/angularjs-multi-step-form-using-ui-router

which is a tutorial guiding to create a Wizard and has a working example (a Plunker).

There are also other Angular modules which aim to do the same:

• https://github.com/troch/angular-multi-step-form (demos and docs here)
• https://github.com/mgonto/angular-wizard (demo here)

And in conclusion another tutorial with working demo:

• http://code.realcrowd.com/the-wonderful-wizard-of-angularjs/

But if you "google" for "multi-step form angular" you can find some more examples.

Also on StackOverflow you can find suggestions on how to create a multi-step form (for example see AngularJS multi-step form validation).