<html ng-app="doctorApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="DoctorController">
<h1>Doctor Details</h1>
<form name="doctorForm" novalidate>
<label for="dno">Doctor Number:</label>
<input type="text" id="dno" name="dno" ng-model="newDoctor.dno" required>
<label for="dname">Doctor Name:</label>
<input type="text" id="dname" name="dname" ng-model="newDoctor.dname" required>
<label for="address">Address:</label>
<input type="text" id="address" name="address" ng-model="newDoctor.address" required>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" ng-model="newDoctor.phone" required>
<button type="button" ng-click="addDoctor()" ng-disabled="doctorForm.$invalid">Add Doctor</button>
</form>
<h2>Doctor List</h2>
<table>
<tr>
<th>Doctor Number</th>
<th>Doctor Name</th>
<th>Address</th>
<th>Phone Number</th>
</tr>
<tr ng-repeat="doctor in doctors">
<td>{{ doctor.dno }}</td>
<td>{{ doctor.dname }}</td>
<td>{{ doctor.address }}</td>
<td>{{ doctor.phone }}</td>
</tr>
</table>
<script>
var app = angular.module('doctorApp', []);
app.controller('DoctorController', function ($scope) {
$scope.doctors = [];
$scope.addDoctor = function () {
$scope.doctors.push(angular.copy($scope.newDoctor));
$scope.newDoctor = {};
$scope.doctorForm.$setPristine();
};
});
</script>
</body>
</html>
No comments:
Post a Comment