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模块旨在做同样的事情：

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

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

但如果你＆＃34; google ＆＃34; for＆＃34;多步形式角度＆＃34;你可以找到更多的例子。

同样在 StackOverflow 上，您可以找到有关如何创建多步骤表单的建议（例如，请参阅AngularJS multi-step form 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]"

你无意中获得了以前的＆＃34;如果您通过递减currentState来选择，则从此起作用。

Answer 3

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

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

以下是一个工作示例：JSFiddle

实施例

<强>的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>

<强> 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方法添加到其控制器，然后将其控制器的引用添加到{{1}的parts数组中控制器。这使myMultiPartForm能够操作每个myMultiPartForm的DOM元素，而无需使用jQuery或jqLite遍历DOM树。

myFormPart

<强>形部分submit.directive.js

最后，这个指令为它应用的任何元素添加了一个click处理程序，它将调用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 = {}; }，在这个示例中始终是myFormPart.onSubmit方法（但对于每个表单可以是不同的函数）一部分）。

view.save

运营顺序

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

实例化multiPartForm控制器
formPart实例化控制器
formPartSubmit链接的DOM元素
formPart链接的DOM元素
formPart B控制器实例化
formPartSubmit B DOM元素链接
formPart B DOM元素链接
formPart C controller instantiated
formPartSubmit C DOM元素链接
formPart C DOM元素链接
multiPartForm DOM元素链接

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

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

3 个答案:

实施例

运营顺序