如何使用 AngularJS 处理单个页面中存在的多个表单 [英] How to handle multiple forms present in a single page using AngularJS
问题描述
我是 AngularJS 的新手.我在一个页面上有多个表单，这些表单一次只根据用户选择显示一个.
DOM 有两个子控制器，分别是 FirstFormController, SecondFormController 包裹在名为 XceptionController 的父控制器之下.父控制器函数用于提交来自两个孩子的表单数据.表单数据保存到父控制器的范围内.我的 HTML 如下所示
<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>选择一个选项</option><option value="firstform">获取名字</option><option value="secondform">获取姓氏</option></选择></表单><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">名字</label></表单><div class="content" ng-show="fname"><p>名字是 {{form.firstname}}</p><div ng-controller="SecondFormController" class="secondform" ng-show="lname"><表格名称="姓氏表格"><input type="text" name="lastname" ng-model="form.lastname" id="lastname"><label for="#lastname">Lastname</label></表单><div class="content" ng-show="lname"><p>姓氏是 {{form.lastname}}</p>
<button ng-click="submitForm(form)">提交</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;}否则 if(foo == 'secondform'){$scope.lname = '1';}};$scope.submitForm = 函数(表单){//表单数据控制台日志(表单)；};});app.controller('FirstFormController', function($scope){$scope.firstname = "";});app.controller('SecondFormController', function($scope){$scope.lastname = "";});但是在提交表单时，我从两个表单中获取数据，因为我将其设置在父级的范围内.有没有一种方法可以提交表单并仅获取当前显示的表单的表单数据.这个小提琴将帮助你更多地理解我的问题.https://jsfiddle.net/xmo3ahjq/15/
还可以帮助我了解我的代码是否按照应有的方式正确编写，或者是否有更好的方法来实现这一点.表单提交代码是否应该放在单独的 angular 服务下?
var app = angular.module('app', []);app.controller('XceptionController', function($scope) {$scope.form = {};$scope.selectedForm = null;$scope.selectForm = function() {//重置表单模型对象$scope.form = {};};$scope.isSelected = function(formName) {返回 $scope.selectedForm === formName;};$scope.submitForm = 函数(表单){//表单数据控制台日志(表单)；};});app.controller('FirstFormController', function($scope) {});app.controller('SecondFormController', function($scope) {});<div class="container" ng-controller="XceptionController"><form class="form-container"><select id="select-form" ng-change=selectForm() ng-model="selectedForm"><option value="" disabled selected>选择一个选项</option><option value="firstform">获取名字</option><option value="secondform">获取姓氏</option></选择></表单><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">名字</label></表单><div class="内容"><p>名字是 {{form.firstname}}</p><div ng-controller="SecondFormController" class="secondform" ng-show="isSelected('secondform')"><表格名称="姓氏表格"><input type="text" name="lastname" ng-model="form.lastname" id="lastname"><label for="#lastname">Lastname</label></表单><div class="内容"><p>姓氏是 {{form.lastname}}</p>
