Solution:
<html>
<head>
<title>Doctor</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body ng-app="mainApp" ng-controller="docController">
<h2>Doctor Information Details Form</h2>
<div>
<form ng-submit="todoAdd()">
<table border="1">
<tr>
<td>Enter the Doctor Number</td>
<td><input type="number" name="docno" ng-model="docno"></td>
</tr>
<tr>
<td>Enter the Doctor Name </td>
<td>
<input type="text" name="docname" ng-model="docname">
</td>
</tr>
<tr>
<td>Enter the Doctor Address </td>
<td><input type="text" name="docaddress" ng-model="docaddress"> </td>
</tr>
<tr>
<td>Enter Phone Number</td>
<td> <input type="number" name="phone" ng-model="phone"></td>
</tr>
<tr>
<td>Enter the Doctor Specialization</td>
<td> <input type="text" name="docspl" ng-model="docspl"></td>
</tr>
<tr>
<td> <input type="submit" value="Add">
</td>
</tr>
</table>
</form>
</div>
<div>
<br><br>
Doctor Details<br><br>
<table border="1">
<tr ng-repeat="x in todoList">
<td>{{x.doctno}}</td>
<td>{{x.name}}</td>
<td>{{x.address}}</td>
<td>{{x.phone}}</td>
<td>{{x.spl}}</td>
</tr>
</table>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('docController', function ($scope) {
$scope.todoList=[{doctno:'Doctor no',name:'Doctor Name',address:'Address',phone:'Phone no',spl:'Speciality'}];
$scope.todoAdd=function()
{
if($scope.docno!="" && $scope.docname!="" && $scope.docaddress!="" && $scope.phone!="" && $scope.docspl!="")
{
$scope.todoList.push({doctno:$scope.docno, name:$scope.docname, address:$scope.docaddress, phone:$scope.phone, spl:$scope.docspl});
$scope.docno="";
$scope.docname="";
$scope.docaddress="";
$scope.phone="";
$scope.docspl="";
}
}
$scope.showval = false;
$scope.isShow = function (param) {
if (param == "show") {
$scope.showval = true;
}
}
});
</script>
</body>
</html>
0 Comments