问卷的下一步按钮的逻辑？

Question

我是AngularJS的初学者,面临一些问题.我正在尝试在每页上制作一个问题,每个问题都有1个问题.在每个Next按钮上,数据都保存在数据库中.我正在尝试制作一个Next按钮逻辑,但无法知道如何制作一个通用的NEXT按钮逻辑,它使用ng-show启用下一个字段,禁用当前字段并最后在数据库中存储字段的当前值.有人可以帮助为Next按钮创建一个逻辑,它将在下一页启用下一个div show并将数据存储在Database中吗？

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

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

还有其他Angular 模块也旨在实现相同的功能：

• https://github.com/troch/angular-multi-step-form （此处为演示和文档）
• https://github.com/mgonto/angular-wizard（此处演示）

最后，还有另一个带有工作演示的教程：

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

但是，如果您“谷歌”搜索“多步形式角度”，您可以找到更多示例。

此外，您还可以在StackOverflow上找到有关如何创建多步骤表单的建议（例如，请参阅AngularJS 多步骤表单验证）。