Solution:
<html>
<head>
<meta charset="UTF-8">
<title>Students Marksheet Program</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body ng-app="mainApp" ng-controller="custController">
<h2>Customer Information for Plain Booking</h2>
<div>
<form name="form1">
<table border="1">
<tr>
<td>Enter name of Customer</td>
<td><input type="text" name="custname" ng-model="custname"></td>
</tr>
<tr>
<td>Enter address of Customer </td>
<td>
<input type="text" name="custaddr" ng-model="custaddr">
</td>
</tr>
<tr>
<td>Enter Contact No </td>
<td><input type="number" name="custcontact" ng-model="custcontact"> </td>
</tr>
<tr>
<td>Enter Gender </td>
<td> <input type="text" name="custgender" ng-model="custgender"></td>
</tr>
<tr>
<td>Enter Date of Booking</td>
<td> <input type="date" name="custdob" ng-model="custdob"></td>
</tr>
<tr>
<td>Enter Date of Journey</td>
<td> <input type="date" name="custdoj" ng-model="custdoj"></td>
</tr>
<tr>
<td>Enter 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('show')">
</td>
</tr>
</table>
</form>
</div>
<div ng-show="showval">
<br><br>
<h3> eTicket of Passenger for Plain</h3><br><br>
<form name="form2" controller="custController">
<table border="2">
<thead>
<td>name</td>
<td>address</td>
<td>contactno</td>
<td>gender</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>{{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 (param) { if (param == "show") {
$scope.showval = true;
}
}
});
</script>
</body>
</html>
0 Comments