Javascript 问卷的“下一步”按钮的逻辑？

我是AngularJS的初学者，面临一些问题。我想做一份问卷，每页有一个问题。在每个“下一步”按钮上，数据都保存在数据库中。我正在尝试创建一个下一个按钮逻辑，但不知道如何创建一个通用的下一个按钮逻辑，该逻辑使用ng show启用下一个字段，禁用当前字段，最后将字段的当前值存储在数据库中。有人能帮我为下一个按钮建立一个逻辑吗？这个按钮将在下一页启用下一个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>

---

您可以将showDiv布尔值保存在一个数组中，并将相应的索引保存在内存中。比如说：

$scope.currentState = 0;

//ordered representation of possible states
$scope.stateArray = [true, false, false, false, false];

$scope.next = function(){

  //on to the next showDiv
  currentState++;

  stateArray.forEach(function(index, state){

    //hide everything else.
    if(index != currentState){
      state = false;
    }
    else{
      state = true;
    }
  }
}

然后，在html中执行

ng show=“stateArray[currentState]”

---

如果您选择递减当前状态，您将不经意地从中获得一个“previous”函数。

您可以创建一个多步骤表单（也称为向导）。 为此，为什么不按照本文建议使用：

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

还有其他角度模块，其目的相同：

• （）
• （）

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

但如果你用“谷歌”搜索“多步形式角度”，你可以找到更多的例子

---

另外，在StackOverflow上，您可以找到关于如何创建多步骤表单的建议（例如，请参阅）。

我将创建三个可用于构建多部分表单的自定义指令：

myMultiPartForm

指令将包装表单并跟踪哪个部分可见

myFormPart

指令将多次用作每个表单节的包装器

myFormPartSubmit

将在每个表单部分的提交按钮上使用，以前进到下一部分

以下是一个工作示例：

例子 index.html

在这个文件中，我使用

MyViewController

作为视图，它将公开一个

part

变量，用于跟踪当前显示的表单部分，以及每个表单部分在提交时可以调用的

save

方法

<div ng-app="myApp" ng-controller="MyViewController as view">
  <my-multi-part-form part="{{view.part}}">
    <my-form-part on-submit="view.save(data)">
      <label>
        Name:
        <input type="text" ng-model="formPart.data.name">
      </label>
      <button my-form-part-submit>
        Next
      </button>
    </my-form-part>
    <my-form-part on-submit="view.save(data)">
      <label>
        Age:
        <input type="number" ng-model="formPart.data.age">
      </label>
      <button my-form-part-submit>
        Next
      </button>
    </my-form-part>
    <my-form-part on-submit="view.save(data)">
      <label>
        Gender:
        <select ng-model="formPart.data.gender">
          <option value="male">Male</option>
          <option value="female">Female</option>
        </select>
      </label>
      <button my-form-part-submit>
        Done
      </button>
    </my-form-part>
  </my-multi-part-form>
  <div ng-if="view.part > 2">
    Complete!
  </div>
</div>

多部分表单.directive.js

在这里，我定义了

myMultiPartForm

指令并观察

part

属性，它是

view.part

的插值。每当该值更改时（即调用

view.save

后成功），它将隐藏除

view.part

现在引用的表单部分之外的所有表单部分

angular.module('myApp')
  .directive('myMultiPartForm', myMultiPartFormDirective)
  .controller('MultiPartFormController', MultiPartFormController)
;

function myMultiPartFormDirective() {
  return {
    controller  : 'MultiPartFormController',
    controllerAs: 'multiPartForm',
    link        : postLink
  };

  function postLink(scope, iElement, iAttrs, multiPartForm) {
    iAttrs.$observe('part', function (newValue) {
      angular.forEach(multiPartForm.parts, function (part, index) {
        if (index == newValue) part.show();
        else part.hide();
      });
    });
  }
}

function MultiPartFormController() {
  var multiPartForm = this;
  multiPartForm.parts = [];
}

形成part.directive.js

这就是它变凉的地方。每个

myFormPart

指令在后链接阶段向其控制器添加

show

和

hide

方法，然后向

myMultiPartForm

控制器的

parts

数组添加对其控制器的引用。这使

myMultiPartForm

能够操作每个

myFormPart

的DOM元素，而无需使用jQuery或jqLite遍历DOM树

angular.module('myApp')
  .directive('myFormPart', myFormPartDirective)
  .controller('FormPartController', FormPartController)
;

function myFormPartDirective() {
  return {
    bindToController: {
      onSubmit: '&'
    },
    controller      : 'FormPartController',
    controllerAs    : 'formPart',
    link            : postLink,
    require         : ['myFormPart', '^myMultiPartForm'],
    scope           : true,
    template        : '<ng-transclude></ng-transclude>',
    transclude      : true
  };

  function postLink(scope, iElement, iAttrs, controllers) {
    var formPart = controllers[0];
    var multiPartForm = controllers[1];
    formPart.hide = function () {
      iElement.css({display: 'none'});
    };
    formPart.show = function () {
      iElement.css({display: 'block'});
    };
    multiPartForm.parts.push(formPart);
  }
}

function FormPartController() {
  var formPart = this;
  formPart.data = {};
}

操作顺序 要了解所有这些是如何工作的，您需要了解事情发生的顺序。以下是一个概要：

多部件窗体控制器已实例化

formPart实例化了一个控制器

formPartSubmit链接的DOM元素

formPart链接的DOM元素

formPart B控制器已实例化

formPartSubmit B DOM元素链接

formPart B DOM元素链接

formPart C控制器实例化

formPartSubmit C DOM元素链接

formPart C DOM元素链接

多部件表单DOM元素链接

multiPartForm

控制器首先实例化，但最后链接。这意味着在调用它的postLink函数时，它的控制器拥有它所需要的关于每个formPart的所有信息。然后，插值

部分

值，并触发第一个$observe回调

angular.module('myApp')
  .directive('myMultiPartForm', myMultiPartFormDirective)
  .controller('MultiPartFormController', MultiPartFormController)
;

function myMultiPartFormDirective() {
  return {
    controller  : 'MultiPartFormController',
    controllerAs: 'multiPartForm',
    link        : postLink
  };

  function postLink(scope, iElement, iAttrs, multiPartForm) {
    iAttrs.$observe('part', function (newValue) {
      angular.forEach(multiPartForm.parts, function (part, index) {
        if (index == newValue) part.show();
        else part.hide();
      });
    });
  }
}

function MultiPartFormController() {
  var multiPartForm = this;
  multiPartForm.parts = [];
}

angular.module('myApp')
  .directive('myFormPart', myFormPartDirective)
  .controller('FormPartController', FormPartController)
;

function myFormPartDirective() {
  return {
    bindToController: {
      onSubmit: '&'
    },
    controller      : 'FormPartController',
    controllerAs    : 'formPart',
    link            : postLink,
    require         : ['myFormPart', '^myMultiPartForm'],
    scope           : true,
    template        : '<ng-transclude></ng-transclude>',
    transclude      : true
  };

  function postLink(scope, iElement, iAttrs, controllers) {
    var formPart = controllers[0];
    var multiPartForm = controllers[1];
    formPart.hide = function () {
      iElement.css({display: 'none'});
    };
    formPart.show = function () {
      iElement.css({display: 'block'});
    };
    multiPartForm.parts.push(formPart);
  }
}

function FormPartController() {
  var formPart = this;
  formPart.data = {};
}

angular.module('myApp')
  .directive('myFormPartSubmit', myFormPartSubmitDirective)
;

function myFormPartSubmitDirective() {
  return {
    link: postLink,
    require: '^myFormPart'
  };

  function postLink(scope, iElement, iAttrs, formPart) {
    iElement.on('click', function() {
      if (typeof formPart.onSubmit === 'function') {
        formPart.onSubmit({data: formPart.data});
      }
    });
  }
}