0
在下面的代碼中，我將根據所選座位的數量逐個顯示輸入乘客詳細信息部分。 我已經使用ng-show來顯示根據座位選擇輸入乘客詳細信息部分。 如果選擇2個座位，則會顯示兩個輸入2個乘客詳細信息的部分，在這種情況下，我只想驗證2個乘客詳細信息。如果選擇了3個座位，則會顯示3個用於輸入乘客詳細信息的部分。即使某個部分在ng-hide角度下也驗證了該細節。如何擺脫這一點。不驗證隱藏的表單元素
<form novalidate name="passengerDetails">
<div class="col-xs-12 col-md-4">
<div class="panel panel-default ticket-panel">
<div class="panel-heading">
<h3 class="panel-title">Contact Details</h3>
</div>
<div class="panel-body">
<div class="passenger-detail">
<label for="name">
E-Mail
<input type="email" ng-model="contactEmail" name="contactEmail" ng-required='true' required>
</label> <span style="color: red" ng-show="passengerDetails.contactEmail.$touched && passengerDetails.contactEmail.$invalid">Enter email address</span>
<br>
<label for="name">
Phone Number
<input type="number" ng-model="contactNumber" name="contactNumber" ng-required="true" required>
</label> <span style="color: red" ng-show="passengerDetails.contactNumber.$touched && passengerDetails.contactNumber.$invalid ">Enter Phone Number</span>
</div>
</div>
<div class="panel-heading" ng-show="seatSelected.length>0 && seatSelected.length<=6 ">
<h3 class="panel-title">Details of 1st Passenger</h3>
</div>
<div class="panel-body" ng-show="seatSelected.length>0 && seatSelected.length<=6 ">
<div class="passenger-detail">
<label for="name1">
Name
<input type="text" id="name1" ng-model="passengerOneName" name="passengerOneName" ng-required="true" required>
</label> <span style="color: red" ng-show="passengerDetails.passengerOneName.$touched && passengerDetails.passengerOneName.$invalid"> Enter Name</span>
<br>
<label for="age1">
Age
<input type="number" id="age1" name="passengerOneAge" ng-model="passengerOneAge" ng-required="true">
</label><span style="color: red" ng-show="passengerDetails.passengerOneAge.$touched && passengerDetails.passengerOneAge.$invalid">Enter Age</span>
</div>
</div>
<div class="panel-heading" ng-show="seatSelected.length>1 && seatSelected.length<=6">
<h3 class="panel-title">Details of 2nd Passenger</h3>
</div>
<div class="panel-body" ng-show="seatSelected.length>1 && seatSelected.length<=6">
<div class="passenger-detail">
<label for="name2">
Name
<input type="text" ng-model="passengerTwoName" name="passengerTwoName" id="name2" ng-required="true" true>
</label><span style="color: red" ng-show="passengerDetails.passengerTwoName.$touched && passengerDetails.passengerTwoName.$invalid"> Enter Name</span>
<br>
<label for="age2">
Age
<input type="number" id="age2" ng-model="passengerTwoAge" name="passengerTwoAge" ng-required="true" true>
</label><span style="color: red" ng-show="passengerDetails.passengerTwoAge.$touched && passengerDetails.passengerTwoAge.$invalid">Enter Age</span>
<br>
</div>
</div>
<div class="panel-heading" ng-show="seatSelected.length>2 && seatSelected.length<=6">
<h3 class="panel-title">Details of 3rd Passenger</h3>
</div>
<div class="panel-body" ng-show="seatSelected.length>2 && seatSelected.length<=6">
<div class="passenger-detail">
<label for="name3">
Name
<input type="text" id="name3" ng-model="passengerThreeName" name="passengerThreeName" ng-required="true" required>
</label><span style="color: red" ng-show="passengerDetails.passengerThreeName.$touched && passengerDetails.passengerThreeName.$invalid"> Enter Name</span>
<br>
<label for="age3">
Age
<input type="number" id="age3" ng-model="passengerThreeAge" name="passengerThreeAge" ng-required="true" required>
</label><span style="color: red" ng-show="passengerDetails.passengerThreeAge.$touched && passengerDetails.passengerThreeAge.$invalid">Enter Age</span>
</div>
</div>
<div class="panel-heading" ng-show="seatSelected.length>3 && seatSelected.length<=6">
<h3 class="panel-title">Details of 4th Passenger</h3>
</div>
<div class="panel-body" ng-show="seatSelected.length>3 && seatSelected.length<=6">
<div class="passenger-detail">
<label for="name4">
Name
<input type="text" id="name4" ng-model="passengerFourName" name="passengerFourName" ng-required="true" required>
</label><span style="color: red" ng-show="passengerDetails.passengerFourName.$touched && passengerDetails.passengerFourName.$invalid"> Enter Name</span>
<br>
<label for="age4">
Age
<input type="number" id="age4" ng-model="passengerFourAge" name="passengerFourAge" ng-required="true" required>
</label><span style="color: red" ng-show="passengerDetails.passengerFourAge.$touched && passengerDetails.passengerFourAge.$invalid"> Enter Name</span>
</div>
</div>
<div class="panel-heading" ng-show="seatSelected.length>4 && seatSelected.length<=6">
<h3 class="panel-title">Details of 5th Passenger</h3>
</div>
<div class="panel-body" ng-show="seatSelected.length>4 && seatSelected.length<=6">
<div class="passenger-detail">
<label for="name5">
Name
<input type="text" id="name5" ng-model="passengerFiveName" name="passengerFiveName" ng-required="true" required>
</label><span style="color: red" ng-show="passengerDetails.passengerFiveName.$touched && passengerDetails.passengerFiveName.$invalid"> Enter Name</span>
<br>
<label for="age5">
Age
<input type="number" id="age5" ng-model="passengerFiveAge" name="passengerFiveAge" ng-required="true" required>
</label><span style="color: red" ng-show="passengerDetails.passengerFiveAge.$touched && passengerDetails.passengerFiveAge.$invalid"> Enter Name</span>
</div>
</div>
<div class="panel-heading" ng-show="seatSelected.length>5 && seatSelected.length<=6">
<h3 class="panel-title">Details of 6th Passenger</h3>
</div>
<div class="panel-body" ng-show="seatSelected.length>5 && seatSelected.length<=6">
<div class="passenger-detail">
<label for="name6">
Name
<input type="text" id="name6" ng-model="passengerSixName" name="passengerSixName" ng-required="true" required>
</label><span style="color: red" ng-show="passengerDetails.passengerSixName.$touched && passengerDetails.passengerSixName.$invalid"> Enter Name</span>
<br>
<label for="age6">
Age
<input type="number" id="age6" ng-model="passengerSixAge" name="passengerSixAge" ng-required="true" required>
</label><span style="color: red" ng-show="passengerDetails.passengerSixAge.$touched && passengerDetails.passengerSixAge.$invalid"> Enter Name</span>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="panel panel-default ticket-panel">
<div class="panel-heading">
<h3 class="panel-title">Your Ticket Details</h3>
</div>
<div class="panel-body">
<div class="detail-group">
<p>Price of a ticket: Rs.{{ticketPrice}}</p>
<p>Bus Timings: 2pm - 5pm</p>
<p>Total Tickets Selected: <b>{{result.length}}</b>
</p>
</div>
</div>
<div class="panel-footer">
<p>Total fare is: Rs. <b>{{result.length * ticketPrice}}</b>
</p>
<button type="submit">Continue to payment</button>
</div>
</div>
</div>
將ng-show更改爲ng-if – Vivz