Code Snippet:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CRUD Operations</title>
<script src="Scripts/angular.js"></script>
<script type="text/javascript">
var app = angular.module('CRUDModule', []);
app.service('CRUDService', function () {
var uid = 1;
var contacts = [{
id: 0,
name: "Developer",
email: "developer@gmail.com",
phone: 1234657890
}];
this.save = function (contact) {
if (contact.id == null) {
contact.id = uid++;
contacts.push(contact);
} else {
for (i in contacts) {
if (contacts[i].id == contact.id)
contacts[i] = contact;
}
}
};
this.get = function (id) {
for (i in contacts) {
if (contacts[i].id == id)
return contacts[i];
}
};
this.delete = function (id) {
for (i in contacts) {
if (contacts[i].id == id)
contacts.splice(i, 1);
}
};
this.list = function () {
return contacts;
};
});
app.controller('CRUDController', function ($scope, CRUDService) {
$scope.contacts = CRUDService.list();
$scope.add = function () {
CRUDService.save($scope.newcontact);
$scope.newcontact = {};
};
$scope.edit = function (id) {
$scope.newcontact = angular.copy(CRUDService.get(id));
};
$scope.delete = function (id) {
CRUDService.delete(id);
if ($scope.newcontact.id == id)
$scope.newcontact = {};
};
});
</script>
</head>
<body ng-app="CRUDModule" ng-controller="CRUDController">
<h3>CRUD Operations</h3>
<table style="border:dashed">
<tr>
<td>Name:<input type="text" name="name" ng-model="newcontact.name" /></td>
</tr>
<tr>
<td>Email:<input type="text" name="email" ng-model="newcontact.email" /></td>
</tr>
<tr>
<td>Phone:<input type="number" name="phone" ng-model="newcontact.phone" /></td>
</tr>
<tr>
<td><input type="hidden" ng-model="newcontact.id" /></td>
</tr>
<tr>
<td><button ng-click="add()">Add</button></td>
</tr>
</table>
<br /><br />
<table style="border:dotted">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contacts">
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>
<td>{{contact.phone}}</td>
<td><button ng-click="edit(contact.id)">Edit</button> | <button ng-click="delete(contact.id)">Delete</button></td>
</tr>
</tbody>
</table>
</body>
</html>
UI: How it Looks
We can Add new record , edit existing record and delete records.
No comments:
Post a Comment