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

Question

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

的DOM有两个子控制器即FirstFormController，SecondFormController命名XceptionController父母控制下包裹。 家长控制器功能用于从两个孩子提交表格数据。表单数据保存到父控制器的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 = ""; 
}); 

但在提交表单我得到的数据从这两种形式，因为我把它放在父母的范围。有没有办法让我可以提交表格并仅为当前显示的表格获取表格数据。这小提琴将帮助你更多地理解我的问题。 https://jsfiddle.net/xmo3ahjq/15/

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

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>