Click here to Skip to main content
13,145,068 members (68,269 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

40.6K views
13 bookmarked
Posted 5 Feb 2015

CRUD in Angular.js

, 5 Feb 2015
Rate this:
Please Sign up or sign in to vote.
Easy way for Create Read Update and Delete in Angular js

Introduction

Here is the code for Add, Update, Delete in Angular.

Using the Code

Starting with the code, first we do need to include Angular file in our project.

Then make a simple table for Employee ID, Name, designation, as I have included the code for the same here, then write the Angular code in script tag.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../jquery/jquery/jquery-1.11.2.js"></script>
    <script src="angular.min.js"></script>
</head>
<body ng-app="" ng-controller="empcontroller">
    <br />
    <br />
    <table>
        <tbody> <!-- This table is to enter data-->
            <tr>
                <td>Enter ID: </td><td>
                <input type="text" ng-model="id"/></td>
            </tr>
            <tr>
                <td>Enter Name: </td><td>
                <input type="text" ng-model="name"/></td>
            </tr>
            <tr>
                <td>Enter Designation: </td><td>
                <input type="text" ng-model="desg"/></td>
            </tr>
            <tr> 
                <td><input type="button" 

                ng-click="btnclk()" value="Save"/></td>
                <td><input type="button" 

                ng-click="btnupd(id,name,desg)" value="Update"/></td>
            </tr>
        </tbody>
    </table>
    <table> <!--This table is to display the data-->
        <thead>
              <tr>
                  <td>ID</td>
                  <td>Name</td>
                  <td>Designation</td>
              </tr>
       </thead>
        <tbody ng-repeat="emp in emparr">
            <tr>
                
                <td ng-bind="emp.arr_id"></td>
                <td ng-bind="emp.arr_name"></td>
                <td ng-bind="emp.arr_desg"></td>
                <td><input type="button" 

                ng-click="edit(emp,emparr.indexOf(emp))" value="Edit"/></td>
                <td><input type="button" 

                ng-click="del(emparr.indexOf(emp))" value="Delete"/></td>
            </tr>
        </tbody>
    </table>   

Now in the first table, we have created the textbox to enter data and bind the HTML control with ng-model and get the value of that control.

In the second table, we have used ng-repeat that will clone HTML elements one for each item in collection (in an array).

We have created a button (Save) that will have a click event to call the function associated with it to save the data in the second table. On clicking the Edit button the data will be set in the textboxes in the first table to be edited, button (Update) that will update the existing data in the table and delete button that will delete the selected data.

This is the first table to input data.

As I have also designed the code to validate that the user doesn't enter blank data in the textboxes, now enter some data and click Save button.

Now you can see that user is not allowed to enter blank details.

Saving Data

Now enter data and click save button, clicking it will invoke btnclk() method to save the data. To enter the data, we are using push method to add an array element in ng-repeate=emparr. The textboxes are binded by ng-model so that their values will be used to save data in the array element.

$scope.btnclk = function () {
                if (!$scope.id)
                {
                    alert("Enter ID");
                }
                else if (!$scope.name)
                {
                    alert("Enter Name");
                }
                else if (!$scope.desg) {
                    alert("Enter Designation");
                }
                else {
                $scope.emparr.push({ 'arr_id': $scope.id, 
            'arr_name': $scope.name, 'arr_desg': $scope.desg });
                $scope.id = '';
                $scope.name = '';
                $scope.desg = '';
                }
            };

Editing Data

Select any of the data you want to edit by clicking edit button.

Clicking the button will pass the (emp) model along with the assigned index number of the array element by indexOf method. By the data in the model, we are going to assign the particular data to the textboxes of ID, Name, Designation and the index number received in the data will be saved in a variable (key). This variable will be used to recognize to which array element we have to update the data. So in this manner, whenever you click any element of array will update the value of key variable as well by current index number of the array.

 var key;
            $scope.edit = function (emp, indx) {
                key = indx;                
                $scope.id = emp.arr_id;
                $scope.name = emp.arr_name;
                $scope.desg = emp.arr_desg;
};

Updating Data

Now edit the data and after editing, click update button.

Clicking the button will pass the ng-model of ID, Name, designation textboxes values as parameter, and that data will be used to update our array element. Now here, we will use the value of variable (key) saved to identify at which element we have to update the array.

$scope.btnupd = function (id, name, desg) {
                $scope.emparr[key].arr_id = id;
                $scope.emparr[key].arr_name = name;
                $scope.emparr[key].arr_desg = desg;
                $scope.id = '';
                $scope.name = '';
                $scope.desg = '';
            };

Deleting Data

Now select the data which you want to delete.

Clicking the delete button will pass the index number of the array by indexOf method and then we are using the Splice method to remove array element. The first argument of splice method defines which array element to remove and the second defines how many to remove.

$scope.del = function (id) {
                $scope.emparr.splice(id, 1);
           };

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Rohan Sampat
Software Developer (Junior)
India India
No Biography provided

You may also be interested in...

Comments and Discussions

 
QuestionPlease Post the Angular script Pin
Ben P31-May-15 7:13
memberBen P31-May-15 7:13 
QuestionDid you use a database or Json for this? Pin
Member 97026321-May-15 5:26
memberMember 97026321-May-15 5:26 
AnswerRe: Did you use a database or Json for this? Pin
Rohan Sampat12-May-15 2:51
professionalRohan Sampat12-May-15 2:51 
QuestionI ask you to clarify my code Pin
kra_kos5-Feb-15 22:15
professionalkra_kos5-Feb-15 22:15 
Questionimages Pin
Simon_Whale5-Feb-15 4:34
professionalSimon_Whale5-Feb-15 4:34 
AnswerRe: images Pin
Kenneth Haugland5-Feb-15 19:45
professionalKenneth Haugland5-Feb-15 19:45 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170915.1 | Last Updated 5 Feb 2015
Article Copyright 2015 by Rohan Sampat
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid