如何使用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>