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

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

HTML代码：

 
 
 
User Creation
 
 
 
  Basic Information  
 
 First Name 
  
 
 
 Middle Name 
  
 
 
 Last Name 
  
 
 
 Gender 
 
 Male 
 
 Female 
 
 
 
 Age 
  
 
 
 
  Back  Next 
 
 
 
  

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/

但如果你“ 谷歌 ”为“多步forms角”你可以找到更多的例子。

同样在StackOverflow上，您可以找到有关如何创建多步骤表单的建议（例如，请参阅AngularJS多步骤表单validation ）。

Answer 2

您可以将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]"

如果您通过递减currentState来选择，则会无意中从此获得“先前”function。

Answer 3

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

1. myMultiPartForm指令将包装表单并跟踪哪个部分可见
2. myFormPart指令将多次用作每个表单节的包装器
3. myFormPartSubmit将用于每个表单部分的提交按钮，以进入下一部分

这是一个工作示例： JSFiddle

例

的index.html

在这个文件中，我使用MyViewController作为视图，它将公开一个part变量以跟踪当前正在显示哪个表单部分，以及每个表单部件在提交时可以调用的save方法。

 
    Name:    Next     Age:    Next     Gender:  Male Female    Done    
 Complete! 
  

view.controller.js

视图控制器将part变量初始化为零，这是第一个表单部件的索引（表单部件存储在数组中，在MultiPartFormController ）。

 angular.module('myApp') .controller('MyViewController', MyViewController) ; function MyViewController($http) { var view = this; view.part = 0; view.save = function(data) { $http({ method : 'POST', url : 'https://example.com', data : data }).then(function success(res) { /** handle success **/ view.part++; }).catch(function error(err) { /** handle error **/ }); }; } 

多部分-form.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或jqLit​​e遍历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 : '', 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 = {}; } 

形部分submit.directive.js

最后，这个指令为它应用的任何元素添加了一个click处理程序，它将调用myFormPart.onSubmit ，在这个例子中，它始终是view.save方法（但对于每个表单部分可以是不同的函数）。

 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}); } }); } } 

运营顺序

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

1. multiPartForm控制器实例化
2. formPart实例化的控制器
3. formPartSubmit链接的DOM元素
4. formPart链接的DOM元素
5. formPart B控制器实例化
6. formPartSubmit B DOM元素已链接
7. formPart B DOM元素链接
8. formPart C控制器实例化
9. formPartSubmit C DOM元素已链接
10. formPart C DOM元素链接
11. multiPartForm DOM元素已链接

首先实例化multiPartForm控制器，但最后链接。 这意味着当调用postLink函数时，它的控制器具有每个formPart所需的所有信息。 然后，插入part值并触发第一个$ observe回调。