Slip 15 - D) Using AngularJS Create a SPA for Bus Ticket Reservation consisting of fields : Name, Address, contact no, source station(Dropdown list), Destination station, Date of booking, date of journey, no of passenger, name of passenger, gender of passenger etc. Display the e –Ticket.

Solution:

<html>

<head><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script></head> 

<body ng-app="mainApp" ng-controller="custController">

<h1 align='center'>Customer Information for Bus Booking</h1>

<div>

<form name="form1">

<table border="1">

<tr>

<td>Name</td>

<td><input type="text" name="custname" ng-model="custname"></td>

</tr>

<tr>

<td>Address </td>

<td><input type="text" name="custaddr" ng-model="custaddr"></td>

</tr>

<tr>

<td>Contact No </td>

<td><input type="number" name="custcontact" ng-model="custcontact"> </td>

</tr>

<tr>

<td>Enter Gender </td>

<td> <select ng-model="custgender">
    <option value="Male">Male</option>
    <option value="Female">Female</option>
</select></td>

</tr>
<tr>

    <td>Source Station </td>
    
    <td> <select ng-model="sstation">
        <option value="Pune">Pune</option>
        <option value="Delhi">Delhi</option>
        <option value="Mumbai">Mumbai</option>
        <option value="Jaipur">Jaipur</option>
    </select></td>
    
    </tr>
<tr>
    <tr>

        <td>Destination Station </td>
        
        <td> <select ng-model="dstation" >
            <option value="Pune">Pune</option>
            <option value="Delhi">Delhi</option>
            <option value="Mumbai">Mumbai</option>
            <option value="Jaipur">Jaipur</option>
        </select></td>
        
        </tr>
    <tr>
<td>Date of Booking</td>

<td> <input type="date" name="custdob" ng-model="custdob" placeholder="dd-mm-yyyy"></td>

</tr>

<tr>

<td>Date of Journey</td>

<td> <input type="date" name="custdoj" ng-model="custdoj" placeholder="dd-mm-yyyy"></td>

</tr>

<tr>

<td>No.of Passenger</td>

<td> <input type="number" name="custpass" ng-model="custpass"></td>

</tr>

<tr>

<td> <input type="button" value="Display Result" ng-click="isShowHide()"></td>

</tr>

</table>

</form>

</div>

<div ng-show="showval">

<br><br>

<h1 align='center'> e-Ticket </h1><br><br>

<form name="form2" controller="custController">

<table border="2">

<thead>

<td>Name</td>

<td>Address</td>

<td>Contactno</td> 

<td>Gender</td>

<td>Source Station</td>

<td>Destination Station</td>

<td>Date of Booking</td>

<td>Date of Journey</td>

<td>No. of passengers</td>

</thead>

<tr>

<td>{{custname}}</td>

<td>{{custaddr}}</td>

<td>{{custcontact}}</td>

<td>{{custgender}}</td>

<td><div ng-switch="sstation">
    <div ng-switch-when="Pune">From Pune</div>
    <div ng-switch-when="Mumbai">From Mumbai</div>
    <div ng-switch-when="Delhi">From Delhi</div>
    <div ng-switch-when="Jaipur">From Jaipur</div>
</div>
</td>

<td>
        <div ng-switch="dstation">
        <div ng-switch-when="Pune">To Pune</div>
        <div ng-switch-when="Mumbai">To Mumbai</div>
        <div ng-switch-when="Delhi">To Delhi</div>
        <div ng-switch-when="Jaipur">To Jaipur</div>
    </div></td>

<td>{{custdob}}</td>

<td>{{custdoj}}</td>

<td>{{custpass}}</td>

</tr>

</table>

</form>

</div>

<script>

var mainApp = angular.module("mainApp", []);

mainApp.controller('custController', function ($scope) {

$scope.showval = false;

$scope.isShowHide = function () {


$scope.showval = true;



}

});

</script>

</body>

</html>

Post a Comment

0 Comments