Angular

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

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.
  1. <HTML ng-app = "myapp">     
  2.  <TITLE>AngularJS: CRUD Operation</TITLE>     
  3.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>     
  4.     <script>     
  5.        var myapp=angular.module("myapp",[]);                 
  6.        myapp.controller("myappcont",function($scope){    
  7.              $scope.studentindex=0;    
  8.              $scope.Genders=[{Text:"Male",Value:"Male"},    
  9.                                     {Text:"Female",Value:"Female"}    
  10.                                 ];    
  11.            $scope.SNames=[{Text:"A",Value:"A"},    
  12.                                     {Text:"B",Value:"B"},    
  13.                                     {Text:"C",Value:"C"}    
  14.                                 ];    
  15.              $scope.student={ID:0,Name:'',Gender:"Male",Class:"1Std",Section:"A"};    
  16.        $scope.students=[     
  17.        {ID:1,Name:"Kailash",Gender:"Male",Class:"1Std",Section:"A"},     
  18.        {ID:2,Name:"Kalyan",Gender:"Male",Class:"1Std",Section:"A"},     
  19.        {ID:3,Name:"Kalyani",Gender:"Female",Class:"1Std",Section:"A"},     
  20.        {ID:4,Name:"Kamal",Gender:"Male",Class:"2Std",Section:"B"},     
  21.        {ID:6,Name:"Keshav",Gender:"Male",Class:"2Std",Section:"B"},     
  22.        {ID:7,Name:"KedarGouri",Gender:"Female",Class:"2Std",Section:"B"}];     
  23.              $scope.edit=function(st){    
  24.                           $scope.studentindex=$scope.students.indexOf(st);    
  25.                           $scope.student.ID=st.ID;    
  26.                           $scope.student.Name=st.Name;    
  27.                           $scope.student.Gender=st.Gender;    
  28.                           $scope.student.Section=st.Section;    
  29.                           $scope.student.Class=st.Class;    
  30.              };    
  31.              $scope.updatestudent=function(){    
  32.                 var st={    
  33.                           ID:$scope.student.ID,    
  34.                           Name:$scope.student.Name,    
  35.                           Gender:$scope.student.Gender,    
  36.                           Section:$scope.student.Section,    
  37.                           Class:$scope.student.Class    
  38.                           };    
  39.                 if($scope.student.ID>0){    
  40.                           $scope.students.splice($scope.studentindex, 1);    
  41.                           $scope.students.splice($scope.studentindex, 0, st);                        
  42.                      }    
  43.                      else    
  44.                      {    
  45.                      st.ID=$scope.students.length+1;    
  46.                           $scope.students.push(st);}    
  47.                            $scope.clear();    
  48.              };    
  49.              $scope.delete=function(st){    
  50.                  var _index = $scope.students.indexOf(st);     
  51.          $scope.students.splice(_index, 1);     
  52.              };    
  53.              $scope.clear=function(st){    
  54.                 $scope.student.ID=0;    
  55.                      $scope.student.Name='';    
  56.                      $scope.student.Gender='Male';    
  57.                      $scope.student.Section='A';    
  58.                      $scope.student.Class='';    
  59.                       $scope.studentindex=0;    
  60.              };    
  61.        });          
  62.     </script>     
  63.     <BODY ng-controller="myappcont">     
  64.        <P>    
  65.        <TABLE>    
  66.        <TR>    
  67.        <TD>Name:</TD>    
  68.        <TD><INPUT TYPE="txt" ng-model="student.Name"/></TD>    
  69.        </TR>    
  70.        <TR>    
  71.        <TD>Gender:</TD>    
  72.        <TD>    
  73.        <SELECT ng-model="student.Gender">    
  74.        <OPTION ng-repeat="g in Genders" value="{{g.Value}}"/>{{g.Text}}</OPTION>    
  75.        </SELECT>    
  76.        </TD>    
  77.        </TR>    
  78.        <TR>    
  79.        <TD>Class:</TD>    
  80.         <TD><INPUT TYPE="txt" ng-model="student.Class"/></TD>    
  81.        </TR>    
  82.        <TR>    
  83.        <TD>Section:</TD>    
  84.        <TD>    
  85.        <SELECT ng-model="student.Section">    
  86.        <OPTION ng-repeat="s in SNames" value="{{s.Value}}"/>{{s.Text}}</OPTION>    
  87.        </SELECT>    
  88.        </TD>    
  89.        </TR>    
  90.        <TR>    
  91.        <TD>    
  92.        </TD>    
  93.        <TD>    
  94.          <button ng-click="updatestudent()">Save</button>     
  95.         <button ng-click="clear()">Clear</button>    
  96.        </TD>    
  97.        </TR>    
  98.        </TABLE>    
  99.        </P>    
  100.        <HR/>    
  101.        <table border="1">     
  102.          <tr>     
  103.             <th>Name</th>     
  104.             <th>Gender</th>     
  105.             <th>Class</th>     
  106.             <th>Section</th>     
  107.                            <th>Action</th>    
  108.          </tr>     
  109.          <tr ng-repeat="student in students | filter:searchText">     
  110.             <td>{{student.Name}}</td>     
  111.             <td>{{student.Gender}}</td>     
  112.             <td>{{student.Class}}</td>     
  113.             <td>{{student.Section}}</td>     
  114.                            <TD>    
  115.          <button ng-click="edit(student)">Edit</button>     
  116.         <button ng-click="delete(student)">Delete</button>     
  117.        </TD>    
  118.          </tr>     
  119.        </table>     
  120.     </BODY>     
  121.   </HTML>  
Ebook Download
View all
Learn
View all
Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point
Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
Elite

$45

$

. 00

monthly

For Elite members:

  • Bundle E-books
  • Access to all Learn Series
  • Unlimited Apply Jobs