如何使用 AngularJS 处理单个页面中存在的多个表单

Question

我是 AngularJS 的新手。我在单个页面上有多个表单，这些表单根据用户选择一次只显示一个。

DOM 有两个 child 控制器，即 FirstFormController，SecondFormController 包裹在 parent 名为 XceptionController 的控制器。 parent 控制器函数用于从 children 提交表单数据。表单数据保存到 parent 控制器的 scope.My HTML 如下所示

<div ng-app="app">
 <div class="container" ng-controller="XceptionController">
<form class="form-container">
  <select id="select-form" ng-change=selectForm() ng-model="selectedForm">
    <option value="select" disabled selected>Select an Option</option>
    <option value="firstform">Get Firstname</option>
    <option value="secondform">Get Lastname</option>
  </select>
</form>

<div ng-controller="FirstFormController" class="firstform" ng-show="fname">
  <form name="firstnameform">
    <input type="text" name="firstname" ng-model="form.firstname" id="firstname">
    <label for="#firstname">Firstname</label>
  </form>
  <div class="content" ng-show="fname">
    <p>Firstname is {{form.firstname}}</p>
  </div>
</div>
<div ng-controller="SecondFormController" class="secondform" ng-show="lname">
  <form name="lastnameform">
    <input type="text" name="lastname" ng-model="form.lastname" id="lastname">
    <label for="#lastname">Lastname</label>
  </form>
  <div class="content" ng-show="lname">
    <p>Lastname is {{form.lastname}}</p>
  </div>
</div>
<button ng-click="submitForm(form)">Submit</button>

我的js看起来像

var app = angular.module('app', []);
app.controller('XceptionController', function($scope){
    $scope.form = {};
    $scope.selectedForm = '';
    $scope.selectForm = function() {
    $scope.lname = 0;
    $scope.fname = 0;
    var foo = angular.element(document.querySelector('#select-form')).val();
    if(foo == 'firstform') {
        $scope.fname = 1;
    }
    else if(foo == 'secondform'){
        $scope.lname = '1';
    }
  };
 $scope.submitForm = function(form){
    //form data
    console.log(form);
 };
});

app.controller('FirstFormController', function($scope){
 $scope.firstname = "";
});

app.controller('SecondFormController', function($scope){
 $scope.lastname = "";
});

但是在提交表单时，我从两个表单中获取数据，因为我将它设置在 parent 的范围内。有没有一种方法可以提交表单并仅获取当前显示的表单的表单数据。 fiddle 将帮助您更好地理解我的问题。 https://jsfiddle.net/xmo3ahjq/15/

还可以帮助我了解我的代码是否按照应有的方式正确编写，或者是否有更好的方法来实现它。表单提交代码是否应该放在单独的 angular 服务下？

Answer 1

var app = angular.module('app', []);
app.controller('XceptionController', function($scope) {
  $scope.form = {};
  $scope.selectedForm = null;
  $scope.selectForm = function() {
    // reset the form model object
    $scope.form = {};
  };
  $scope.isSelected = function(formName) {
    return $scope.selectedForm === formName;
  };
  $scope.submitForm = function(form) {
    // form data
    console.log(form);
  };
});

app.controller('FirstFormController', function($scope) {

});

app.controller('SecondFormController', function($scope) {

});

<div ng-app="app">
  <div class="container" ng-controller="XceptionController">
    <form class="form-container">
      <select id="select-form" ng-change=selectForm() ng-model="selectedForm">
        <option value="" disabled selected>Select an Option</option>
        <option value="firstform">Get Firstname</option>
        <option value="secondform">Get Lastname</option>
      </select>
    </form>

    <div ng-controller="FirstFormController" class="firstform" ng-show="isSelected('firstform')">
      <form name="firstnameform">
        <input type="text" name="firstname" ng-model="form.firstname" id="firstname">
        <label for="#firstname">Firstname</label>
      </form>
      <div class="content">
        <p>Firstname is {{form.firstname}}</p>
      </div>
    </div>
    <div ng-controller="SecondFormController" class="secondform" ng-show="isSelected('secondform')">
      <form name="lastnameform">
        <input type="text" name="lastname" ng-model="form.lastname" id="lastname">
        <label for="#lastname">Lastname</label>
      </form>
      <div class="content">
        <p>Lastname is {{form.lastname}}</p>
      </div>
    </div>
    <button ng-click="submitForm(form)">Submit</button>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

如何使用 AngularJS 处理单个页面中存在的多个表单

How to handle multiple forms present in a single page using AngularJS

angularjs

angularjs-scope

angularjs-controller