javascript - 调查问卷“下一步”按钮的逻辑？

Question

我是 AngularJS 的初学者，遇到了一些问题。我正在尝试制作一份问卷，每页有 1 个问题。在每个下一步按钮上，数据都保存在数据库中。我正在尝试制作一个 Next 按钮逻辑，但不知道如何制作一个通用的 NEXT 按钮逻辑，该逻辑使用 ng-show 启用下一个字段，禁用当前字段，最后将字段的当前值存储在数据库中。有人可以帮助为 Next 按钮制作一个逻辑，使下一个 div 显示在下一页并将数据存储在数据库中吗？

HTML代码:

<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

您可以创建一个多步骤表单(也称为向导)。 为此，为什么不使用 Angular ui-router正如这篇文章中所建议的:

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

这是一个指导创建向导的教程，并有一个工作示例 (a Plunker)。

还有其他 Angular 模块 也是这样做的:

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

最后是另一个带有工作演示的教程:

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

但是，如果您“google”“multi-step form angular”，您可以找到更多示例。

您还可以在 StackOverflow 上找到有关如何创建多步骤表单的建议(例如，请参阅 AngularJS multi-step form validation)。