I had this working, well at least working to add new fields with a click.
Now I can't get the fields to repeat, but I'm also running into the issue
of when page loads the form is missing until I move to next tab and back.
I've searched for answers but no luck so far. Any help is greatly
appreciated. Thanks!
<div class="container mpo-form-container" ng-app="travelers">
<div class="row">
<div ng-controller="travelersController">
<form name="client_forms" action="" class="form-horizontal"
novalidate>
<!-- Nav tabs -->
<ul id="mpo-forms-tabs" class="nav nav-tabs">
<li class="active"><a href="#participants" data-toggle="tab">1.
List of Participants >></a></li>
<li><a href="#dietary" data-toggle="tab">2. Dietary / Medical
LIst >></a></li>
<li><a href="#rooming" data-toggle="tab">3. Rooming List
>></a></li>
<li><a href="#payment" data-toggle="tab">4. Payment
Scedule</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade active" id="participants">
<div class="container-fluid form-content">
<div class="row">
<div class="col-sm-5 pull-left">
<p class="text-left">* Required field for the Plane,
Train and Insurance forms</p>
</div>
<div class="col-sm-4 pull-right text-right">
<span>Download</span>
<span>Print</span>
</div>
</div>
<div class="row">
<table class="col-md-12" id="client-table">
<tr>
<td></td>
<td>Given Name*</td>
<td>Middle Name</td>
<td>Last Name*</td>
<td>Date of Birth*</td>
<td>Nationality</td>
<td>Gender</td>
<td>Adult or Student</td>
</tr>
<!-- <tr data-ng-repeat="traveler in travelers"> -->
<tr data-ng-repeat="traveler in travelers">
<td>1.</td>
<td>
<input type="text" placeholder="Given Name"
ng-model="travelersForm.givenName"/>
</td>
<td>
<input type="text" placeholder="Middle Name"
ng-model="travelersForm.middleName"/>
</td>
<td>
<input type="text" placeholder="Last Name"
ng-model="travelersForm.lastName"/>
</td>
<td>
<input type="date" class="date-picker"/>
</td>
<td>
<input type="text" placeholder="Nationality"
ng-model="travelersForm.nationality"/>
</td>
<td>
<select name="gender" id="gender"
ng-model="travelersForm.gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</td>
<td>
<select name="student" id="student"
ng-model="travelersForm.types">
<option value="student">Student</option>
<option value="adult">Adult</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td>
<a href ng-show="showAddTraveler(traveler)"
ng-click="addNewTraveler()">Add New Participant</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="tab-pane fade" id="dietary">
<div class="container-fluid form-content">
<div class="row">
<div class="col-sm-6 pull-left">
<p>Select the participant and indicate their dietary
and/or mdical issues then SAVE before continuing to the next
participant.</p>
</div>
<div class="col-sm-4 pull-right text-right">
<span>Download</span>
<span>Print</span>
</div>
</div>
<div class="row">
<div class="col-md-6 participant-list">
<h3>List of Participants:</h3>
<select name="" class="multi-name"
data-placeholder="Choose a Participant" multiple>
<option
value="Name">{{travelersForm.givenName}}</option>
<option value="Name">Name</option>
<option value="Name">Name</option>
<option value="Name">Name</option>
<option value="Name">Name</option>
<option value="Name">Name</option>
<option value="Name">Name</option>
<option value="Name">Name</option>
<option value="Name">Name</option>
<option value="Name">Name</option>
<option value="Name">Name</option>
<option value="Name">Name</option>
<option value="Name">Name</option>
</select>
</div>
<div class="col-md-6 pull-right">
<div class="row" style="margin-right: 10px; margin-left:
10px;">
<h3>Dietary / Medical List:</h3>
<h4>Medical Information:</h4>
<div class="checkbox">
<label>
<input type="checkbox">Asthma
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">Has Epipen
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">Horse Allergy
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">Physical Handicap
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">Wheel Chair
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">Epileptic
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">Other:
<input type="text-area">
</label>
</div>
</div>
<div class="row" style="margin-right: 10px; margin-left:
10px;">
<h4>Dietary Restriction / Allergy:</h4>
<div class="checkbox">
<label>
<input type="checkbox">Peanuts
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">Nuts
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">Vegetarian
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">No Pork
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">Gluten Intolerance / Celiac
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">Seafood
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">Shellfish
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">Other:
<input type="text-area">
</label>
</div>
</div>
<div class="row">
<a href="#" class="btn btn-primary pull-right">Save</a>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="rooming">
<div class="container-fluid form-content">
<div class="row">
<div class="col-sm-5 pull-left">
<p class="text-left"></p>
</div>
<div class="col-sm-4 pull-right text-right">
<span>Download</span>
<span>Print</span>
</div>
</div>
<div class="row">
<table class="col-md-12">
<tr>
<td></td>
<td>Rooms</td>
<td>Guest 1</td>
<td>Guest 2</td>
<td>Guest 3</td>
<td>Guest 4</td>
<td>Plus One Cot</td>
<td></td>
</tr>
<tr>
<td>1.</td>
<td>
<select name="rooms" id="rooms">
<option value="select room">Select Room
Type</option>
<option value="male room">Male Room</option>
</select>
</td>
<td>
<select name="guestOne" id="guestOne">
<option value="students">Students</option>
<option value="name">Name</option>
</select>
</td>
<td>
<select name="guestTwo" id="guestTwo">
<option value="students">Students</option>
<option value="name">Name</option>
</select>
</td>
<td>
<select name="guestThree" id="guestThree">
<option value="students">Students</option>
<option value="name">Name</option>
</select>
</td>
<td>
<select name="guestFour" id="guestFour">
<option value="students">Students</option>
<option value="name">Name</option>
</select>
</td>
<td>
<input type="checkbox">
</td>
<td>
<select name="guestFour" id="guestFour">
<option value="students">Students</option>
<option value="name">Name</option>
</select>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="tab-pane fade" id="payment">...</div>
</div>
</form>
</div>
</div>
</div>
*APP.JS*
var app = angular.module("travelers", []);
app.controller("travelersController", function($scope) {
$scope.travelersForm = {};
$scope.travelers = [];
$scope.addNewTraveler = function() {
var newItemNo = $scope.travelers.length+1;
$scope.traveler.push({ 'id': 'travelers'+newItemNo });
};
$scope.showAddTraveler = function(travelers) {
return travelers.id ===
$scope.travelers[$scope.travelers.length-1].id;
};
} );
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
