CRUD (Create, Retrieve, Update, And Delete) Operation In Angular

Kailash Chandra Behera
7y
1.9k
0
3
25
Blog

CRUD (Create, Retrieve, Update, and Delete) operations in AngularJS are very easy just like in other applications, such as - WPF, ASP.NET with MVC, and classic ASP.NET. You have nothing to worry about with the CRUD operation in AngularJS because it supports Data Binding.

As with WPF and MVC, AngularJS also supports one-way and two-way data binding. Hence, AngularJS has simplified the CRUD operation through Data Binding.

Example

This demonstrator lists out the students in a table on the page and does CRUD operation with that student data. Here, we can delete, update, and create the student record. For more details go through the below code example.

<HTML ng-app = "myapp">
<TITLE>AngularJS: CRUD Operation</TITLE>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script>
var myapp=angular.module("myapp",[]);
myapp.controller("myappcont",function($scope){
$scope.studentindex=0;
$scope.Genders=[{Text:"Male",Value:"Male"},
{Text:"Female",Value:"Female"}
];
$scope.SNames=[{Text:"A",Value:"A"},
{Text:"B",Value:"B"},
{Text:"C",Value:"C"}
];
$scope.student={ID:0,Name:'',Gender:"Male",Class:"1Std",Section:"A"};
$scope.students=[
{ID:1,Name:"Kailash",Gender:"Male",Class:"1Std",Section:"A"},
{ID:2,Name:"Kalyan",Gender:"Male",Class:"1Std",Section:"A"},
{ID:3,Name:"Kalyani",Gender:"Female",Class:"1Std",Section:"A"},
{ID:4,Name:"Kamal",Gender:"Male",Class:"2Std",Section:"B"},
{ID:6,Name:"Keshav",Gender:"Male",Class:"2Std",Section:"B"},
{ID:7,Name:"KedarGouri",Gender:"Female",Class:"2Std",Section:"B"}];
$scope.edit=function(st){
$scope.studentindex=$scope.students.indexOf(st);
$scope.student.ID=st.ID;
$scope.student.Name=st.Name;
$scope.student.Gender=st.Gender;
$scope.student.Section=st.Section;
$scope.student.Class=st.Class;
};
$scope.updatestudent=function(){
var st={
ID:$scope.student.ID,
Name:$scope.student.Name,
Gender:$scope.student.Gender,
Section:$scope.student.Section,
Class:$scope.student.Class
};
if($scope.student.ID>0){
$scope.students.splice($scope.studentindex, 1);
$scope.students.splice($scope.studentindex, 0, st);
}
else
{
st.ID=$scope.students.length+1;
$scope.students.push(st);}
$scope.clear();
};
$scope.delete=function(st){
var _index = $scope.students.indexOf(st);
$scope.students.splice(_index, 1);
};
$scope.clear=function(st){
$scope.student.ID=0;
$scope.student.Name='';
$scope.student.Gender='Male';
$scope.student.Section='A';
$scope.student.Class='';
$scope.studentindex=0;
};
});
</script>
<BODY ng-controller="myappcont">
<P>
<TABLE>
<TR>
<TD>Name:</TD>
<TD><INPUT TYPE="txt" ng-model="student.Name"/></TD>
</TR>
<TR>
<TD>Gender:</TD>
<TD>
<SELECT ng-model="student.Gender">
<OPTION ng-repeat="g in Genders" value="{{g.Value}}"/>{{g.Text}}</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TD>Class:</TD>
<TD><INPUT TYPE="txt" ng-model="student.Class"/></TD>
</TR>
<TR>
<TD>Section:</TD>
<TD>
<SELECT ng-model="student.Section">
<OPTION ng-repeat="s in SNames" value="{{s.Value}}"/>{{s.Text}}</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TD>
</TD>
<TD>
<button ng-click="updatestudent()">Save</button>
<button ng-click="clear()">Clear</button>
</TD>
</TR>
</TABLE>
</P>
<HR/>
<table border="1">
<tr>
<th>Name</th>
<th>Gender</th>
<th>Class</th>
<th>Section</th>
<th>Action</th>
</tr>
<tr ng-repeat="student in students | filter:searchText">
<td>{{student.Name}}</td>
<td>{{student.Gender}}</td>
<td>{{student.Class}}</td>
<td>{{student.Section}}</td>
<TD>
<button ng-click="edit(student)">Edit</button>
<button ng-click="delete(student)">Delete</button>
</TD>
</tr>
</table>
</BODY>
</HTML>