<html ng-app="busTicketApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="BusTicketController">
<h1>Bus Ticket Reservation</h1>
<form name="ticketForm" novalidate>
<label for="name">Name:</label>
<input type="text" id="name" name="name" ng-model="ticket.name" required>
<label for="address">Address:</label>
<input type="text" id="address" name="address" ng-model="ticket.address" required>
<label for="contact">Contact No.:</label>
<input type="tel" id="contact" name="contact" ng-model="ticket.contact" required>
<label for="source">Source Station:</label>
<select id="source" name="source" ng-model="ticket.source" required>
<option value="" disabled>Select source station</option>
<option ng-repeat="station in stations" value="{{ station }}">{{ station }}</option>
</select>
<label for="destination">Destination Station:</label>
<input type="text" id="destination" name="destination" ng-model="ticket.destination" required>
<label for="bookingDate">Date of Booking:</label>
<input type="date" id="bookingDate" name="bookingDate" ng-model="ticket.bookingDate" required>
<label for="journeyDate">Date of Journey:</label>
<input type="date" id="journeyDate" name="journeyDate" ng-model="ticket.journeyDate" required>
<label for="passengers">Number of Passengers:</label>
<input type="number" id="passengers" name="passengers" ng-model="ticket.passengers" required>
<div ng-repeat="passenger in passengers">
<label for="passengerName">Passenger {{ $index + 1 }} Name:</label>
<input type="text" id="passengerName" name="passengerName" ng-model="passenger.name" required>
<label for="passengerGender">Passenger {{ $index + 1 }} Gender:</label>
<select id="passengerGender" name="passengerGender" ng-model="passenger.gender" required>
<option value="" disabled>Select gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<button type="button" ng-click="generateETicket()" ng-disabled="ticketForm.$invalid">Generate e-Ticket</button>
</form>
<div ng-show="showETicket">
<h2>e-Ticket</h2>
<p><strong>Name:</strong> {{ ticket.name }}</p>
<p><strong>Address:</strong> {{ ticket.address }}</p>
<p><strong>Contact No.:</strong> {{ ticket.contact }}</p>
<p><strong>Source Station:</strong> {{ ticket.source }}</p>
<p><strong>Destination Station:</strong> {{ ticket.destination }}</p>
<p><strong>Date of Booking:</strong> {{ ticket.bookingDate | date }}</p>
<p><strong>Date of Journey:</strong> {{ ticket.journeyDate | date }}</p>
<p><strong>Number of Passengers:</strong> {{ ticket.passengers }}</p>
<p><strong>Passenger Details:</strong></p>
<ul>
<li ng-repeat="passenger in passengers">{{ passenger.name }} ({{ passenger.gender }})</li>
</ul>
</div>
<script>
var app = angular.module('busTicketApp', []);
app.controller('BusTicketController', function ($scope) {
$scope.stations = ['Station A', 'Station B', 'Station C', 'Station D', 'Station E'];
$scope.passengers = [];
$scope.generateETicket = function () {
$scope.showETicket = true;
};
});
</script>
</body>
</html>
No comments:
Post a Comment