如何获得带有使用ng-repeat构建的字段的表单以传递数据？
[英]How to get a form with fields built with ng-repeat to pass data?
问题描述
I have a simple form that allows a user to enter their traveler information in order to take a trip. 
我有一个简单的表格，允许用户输入他们的旅行者信息以进行旅行。 The form is dynamically built depending on how many travelers you said you wanted to travel with you on a previous page. 该表格是动态生成的，具体取决于您在前一页上说过想与您同行的旅行者数量。
The form below works for the first and last payment sections, but it does not work for any of the traveler information sections. 以下表格适用于首付款部分和最后付款部分，但不适用于任何旅行者信息部分。 Form validation works, but I can't get any data from the input fields to pass over. 表单验证有效，但是我无法从输入字段中获取任何数据进行传递。
Here is the HTML code for the form that won't work, which is part of a bigger form): 这是无法使用的表单的HTML代码，这是更大表单的一部分）：
<span ng-repeat="travelerInfo in travelerData" ng-form="travelerForm_{{$index}}">
<div class="row"><!--row5-->
<h3 class="col-md-12" style="margin-left:15px;">{{travelerInfo.fn || 'Traveler'}} {{travelerInfo.ln || $index+1}} {{travelerInfo.sfx}}: {{travelerInfo.traveler_type}} ({{travelerInfo.age_group_range}})</h3>
</div><!--end of row5-->
<div class="col-xs-12 col-md-3 col-sm-6">
<div class="form-group" ng-class="{ 'has-error' : travelerForm_{{$index}}.first_name.$invalid && (!travelerForm_{{$index}}.first_name.$pristine || submitted)}">
<label for="first_name">First Name <i class="fa fa-asterisk"></i></label>
<div class="input-group">
<a class="input-group-addon"><i class="fa fa-user"></i></a>
<input type="text" name="first_name" class="form-control" id="first_name_traveler_{{$index}}" placeholder="First Name" ng-model="travelerInfo.fn" required analytics-on="blur" analytics-category="exercise-field">
</div><!--end of input group-->
</div>
</div><!--end of first-name-->
<div class="col-xs-12 col-md-3 col-sm-6">
<div class="form-group" ng-class="{ 'has-error' : travelerForm_{{$index}}.middle_name.$invalid && (!travelerForm_{{$index}}.middle_name.$pristine || submitted)}">
<label for="middle_name">Middle Name</label>
<div class="input-group">
<a class="input-group-addon"><i class="fa fa-user"></i></a>
<input type="text" name="middle_name" class="form-control" id="middle_name_traveler_{{$index}}" placeholder="Middle Name" ng-model="travelerInfo.mn" analytics-on="blur" analytics-category="exercise-field">
</div>
</div>
</div><!--end of middle name-->
<div class="col-xs-12 col-md-3 col-sm-6">
<div class="form-group" ng-class="{ 'has-error' : travelerForm_{{$index}}.last_name.$invalid && (!travelerForm_{{$index}}.last_name.$pristine || submitted)}">
<label for="last_name">Last Name <i class="fa fa-asterisk"></i></label>
<div class="input-group">
<a class="input-group-addon"><i class="fa fa-user"></i></a>
<input type="text" name="last_name" class="form-control" id="last_name" placeholder="Last Name" ng-model="travelerInfo.ln" required analytics-on="blur" analytics-category="exercise-field">
</div>
</div>
</div><!--end of last name-->
<div class="col-xs-12 col-md-3 col-sm-6"><!--col3-->
<div class="form-group" ng-class="{ 'has-error' : travelerForm_{{$index}}.suffix_traveler.$invalid && (!travelerForm_{{$index}}.suffix.$pristine || submitted)}">
<label for="suffix">Suffix</label>
<div class="input-group">
<a class="input-group-addon"><i class="fa fa-user"></i></a>
<select name="suffix" class="form-control remove-corners" id="suffix_traveler_{{$index}}" ng-model="travelerInfo.sfx" analytics-on="blur" analytics-category="exercise-field">
<option></option>
<option value="II">II</option>
<option value="III">III</option>
<option value="IV">IV</option>
<option value="V">V</option>
<option value="VI">VI</option>
<option value="VII">VII</option>
<option value="VIII">VIII</option>
<option value="IX">IX</option>
<option value="X">X</option>
</select>
</div>
</div>
</div><!--end of col3-->
<div class="col-xs-12 col-md-3 col-sm-6">
<div class="form-group" ng-class="{ 'has-error' : travelerForm_{{$index}}.birthday.$invalid && (!travelerForm_{{$index}}.birthday.$pristine || submitted)}">
<label for="birthday">Birthday<i class="fa fa-asterisk"></i></label>
<div class="input-group">
<a class="input-group-addon"><i class="fa fa-birthday-cake"></i></a>
<input type="date" name="birthday" id="birthday_traveler_{{$index}}" class="form-control" ng-model="travelerInfo.birthday" max="{{travelerInfo.age_group_max | date: 'yyyy-MM-dd'}}" min="{{travelerInfo.age_group_min | date: 'yyyy-MM-dd'}}" required analytics-on="blur" analytics-category="exercise-field">
</div>
</div>
</div><!--end of last name-->
<div class="col-xs-12 col-md-3 col-sm-6"><!--col3-->
<div class="form-group" ng-class="{ 'has-error' : travelerForm_{{$index}}.gender.$invalid && (!travelerForm_{{$index}}.gender.$pristine || submitted)}">
<label for="suffix">Gender <i class="fa fa-asterisk"></i></label>
<div class="input-group">
<a class="input-group-addon"><i class="fa fa-users"></i></i></a>
<select name="gender" class="form-control remove-corners" id="gender_traveler_{{$index}}" ng-model="travelerInfo.gender" required analytics-on="blur" analytics-category="exercise-field">
<option></option>
<option value="Male"><i class="fa fa-male" ></i>Male</option>
<option value="Female"><i class="fa fa-female"></i>Female</option>
</select>
</div>
</div>
</div><!--end of col3-->
<div class="col-xs-12 col-md-6 col-sm-6"><!--col3-->
<div class="form-group" ng-class="{ 'has-error' : travelerForm_{{$index}}.special.$invalid && (!travelerForm_{{$index}}.special.$pristine || submitted)}">
<label for="special">Special Request</label>
<div class="input-group">
<a class="input-group-addon"><i class="fa fa-wheelchair"></i></a>
<select name="special" class="form-control remove-corners" id="special_traveler_{{$index}}" ng-model="travelerInfo.special" analytics-on="blur" analytics-category="exercise-field">
<option></option>
<option>Blind Traveler - with guide dog</option>
<option>Blind Traveler - without guide dog</option>
<option>Deaf Traveler - with guide dog</option>
<option>Deaf Traveler - without guide dog</option>
<option>Meet And Assist - Elderly</option>
<option>Meet And Assist - Handicapped</option>
<option>Meet And Assist - Pregnant</option>
<option>Wheelchair - All the way to seat</option>
<option>Wheelchair - For ramp</option>
<option>Wheelchair - Up and down stairs</option>
<option>Wheelchair - On board</option>
</select>
</div>
</div>
</div><!--end of col3-->
<div class="col-xs-12 col-md-3 col-sm-6"><!--col3-->
<div class="form-group" ng-class="{ 'has-error' : travelerForm_{{$index}}.window_aisle.$invalid && (!travelerForm_{{$index}}.window_aisle.$pristine || submitted)}">
<label for="window_aisle">Window or Aisle</label>
<div class="input-group">
<a class="input-group-addon"><i class="fa fa-plane"></i></a>
<select name="window_aisle" class="form-control remove-corners" id="window_aisle" ng-model="travelerInfo.window_aisle" analytics-on="blur" analytics-category="exercise-field">
<option>No Preference</option>
<option>Window</option>
<option>Middle</option>
<option>Aisle</option>
</select>
</div>
</div>
</div><!--end of col3-->
<div class="col-xs-12 col-md-3 col-sm-6"><!--col3-->
<div class="form-group" ng-class="{ 'has-error' : travelerForm_{{$index}}.meal_preference.$invalid && (!travelerForm_{{$index}}.window_aisle.$pristine || submitted)}">
<label for="meal_preference">Meal Preference</label>
<div class="input-group">
<a class="input-group-addon"><i class="fa fa-cutlery"></i></a>
<select name="meal_preference" class="form-control remove-corners" id="meal_preference_traveler_{{$index}}" ng-model="travelerInfo.meal_preference" analytics-on="blur" analytics-category="exercise-field">
<option>No Preference</option>
<option>Diabetic</option>
<option>Gluten Free</option>
<option>Kasher</option>
<option>Low Cholesterol</option>
<option>Low Fat</option>
<option>Low Sodium</option>
<option>Muslim</option>
<option>Vegan</option>
<option>Vegitarian</option>
</select>
</div>
</div>
</div><!--end of col3-->
<div class="clearfix"></div>
<div class="col-xs-12 col-md-3 col-sm-6"><!--col3-->
<div class="form-group" ng-class="{ 'has-error' : travelerForm_{{$index}}.frequent_flyer_airline.$invalid && (!travelerForm_{{$index}}.window_aisle.$pristine || submitted)}">
<label for="frequent_flyer_airline">Frequent Flyer Airline</label>
<div class="input-group">
<a class="input-group-addon"><i class="fa fa-plane"></i></a>
<select name="frequent_flyer_airline" class="form-control remove-corners" id="frequent_flyer_airline_traveler_{{$index}}" ng-model="travelerInfo.frequent_flyer_airline" analytics-on="blur" analytics-category="exercise-field">
<option></option>
<option>Air Canada</option>
<option>AirTran Airways</option>
<option>Alaska Airlines</option>
<option>American Airlines</option>
<option>Delta Air Lines</option>
<option>Frontier Airlines</option>
<option>JetBlue</option>
<option>Porter Airlines</option>
<option>Spirit Airlines</option>
<option>United Airlines</option>
<option>US Airways</option>
<option>Virgin America</option>
<option>West Jet</option>
</select>
</div>
</div>
</div><!--end of col3-->
<div class="col-xs-12 col-md-3 col-sm-6">
<div class="form-group" ng-class="{ 'has-error' : travelerForm_{{$index}}.frequent_flyer_number.$invalid && (!travelerForm_{{$index}}.frequent_flyer_number.$pristine || submitted)}">
<label for="frequent_flyer_number">Ferequent Flyer Number</label>
<div class="input-group">
<a class="input-group-addon"><b>#</b></a>
<input type="text" name="frequent_flyer_number" style="text-transform: uppercase;" class="form-control" id="frequent_flyer_traveler_{{$index}}" placeholder="Frequent Flyer Number" ng-model="travelerInfo.frequent_flyer_number" analytics-on="blur" analytics-category="exercise-field">
</div>
</div>
</div><!--end of frequent flyer number-->
<div class="col-xs-12 col-md-3 col-sm-6">
<div class="form-group" ng-class="{ 'has-error' : exerciseForm.redress_number.$invalid && (!exerciseForm.redress_number.$pristine || submitted)}">
<label for="redress_number">Redress Number <a href="#" class="c-yellow" data-toggle="modal" data-target="#redress-modal"><i class="fa fa-question-circle fa-lg"></i></a></label>
<div class="input-group">
<a class="input-group-addon"><b>#</b></a>
<input type="text" name="redress_number" style="text-transform: uppercase;" class="form-control" id="redress_number_traveler_{{$index}}" placeholder="Redress Number" ng-model="travelerInfo.redress_number" analytics-on="blur" analytics-category="exercise-field">
</div>
</div>
</div><!--end of last name-->
<div class="col-xs-12 col-md-3 col-sm-6">
<div class="form-group" ng-class="{ 'has-error' : travelerForm_{{$index}}.number_pass.$invalid && (!travelerForm_{{$index}}.number_pass.$pristine || submitted)}">
<label for="number_pass">Number / Pass ID <a href="#" class="c-yellow" data-toggle="modal" data-target="#number-pass-modal"><i class="fa fa-question-circle fa-lg"></i></a></label>
<div class="input-group">
<a class="input-group-addon"><b>#</b></a>
<input type="text" style="text-transform: uppercase;" name="number_pass" class="form-control" id="number_pass_traveler_{{$index}}" placeholder="Redress Number" ng-model="travelerInfo.number_pass" analytics-on="blur" analytics-category="exercise-field">
</div>
</div>
</div><!--end of last name-->
<div class="col-xs-12 col-md-12 col-sm-12">
<hr>
</div>
</span>
The other parts of the form work fine and the data is passed over. 表单的其他部分工作正常，并且数据被传递。
Here is the AngularJS code: 这是AngularJS代码：
$scope.memberData = {};
$scope.travelerInfo = {};
$scope.paymentInfo = {};
$scope.submitted = false;
$scope.exerciseHold = function (isValid) {
if (isValid) {
$('#test-formdata').modal('show');
} //end if isValid function
}; //end of isValid function
This shows a bootstrap modal that has all the data in so I can see it. 这显示了一个包含所有数据的引导程序模式，因此我可以看到它。 The bootstrap model shows memberData and paymentInfo but does not show travelerInfo . 引导程序模型显示memberData和paymentInfo但不显示travelerInfo 。
How can I get the traveler information working? 如何获得旅行者信息？
1 个解决方案
解决方案1
0 2015-01-20 18:33:43
It appears ng-repeat is being misused here. 似乎ng-repeat在这里被滥用了。 See the line below 请参阅下面的行
<span ng-repeat="travelerInfo in travelerData" ng-form="travelerForm_{{$index}}">
The data array is travelerData , but your javascript is referencing travelerInfo , which is a single element of the travelerData array. 数据数组是travelerData ，但是您的JavaScript引用了travelerInfo ，它是travelerData数组的单个元素。
Try changing $scope.travelerInfo = {}; 尝试更改$scope.travelerInfo = {}; to $scope.travelerData = []; 到$scope.travelerData = []; and using console.log($scope.travelerData); 并使用console.log($scope.travelerData); to validate the contents of the array. 验证数组的内容。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
用ng-repeat构建的Angular Form Submit - Angular Form Submit built with ng-repeat
如何从使用ng-repeat生成的输入字段中提交数据并获取所有输入字段的值？ - How to submit data from input fields generated using ng-repeat and get the value of all the input fields?
NG重复提交表单，其中包含生成的字段 - Ng-repeat submit form with generated fields
如何使用ng-repeat将对象数据传递到表 - how to pass object data to table using ng-repeat
ng-repeat内的AngularJS / PHP表单：如何获取特定数据 - AngularJS/PHP form inside ng-repeat : how to get specific data
将已解析的ng-repeat数据传递给函数 - Pass parsed ng-repeat data into function
如何在ng-repeat中访问“外国”字段 - How to access 'foreign' fields in ng-repeat
使用ng-repeat编辑表格数据 - use ng-repeat for edit form data
如何将ng-repeat值传递给控制器 - How to pass ng-repeat value to controller
如何在ng-repeat中传递所选的$ index？ - How to pass the selected $index in ng-repeat?
相关标签