How to add,edit,update and delete in angularjs, CRUD Operation in angularJS

ADD,UPDATE,EDIT AND DELETE IN ANGULARJS

CRUD In AngularJS

I am going to show you very easy steps to do crud operation in angularjs. Now you can easily create, delete and update in AngularJS.

 Before starting to write angularjs code ,Firstly we need to add library of angularjs in our project.

Now, I am creating a Employee table to store employee information.

You may check below HTML page , I have added some basic html code and angularjs syntax inside html tag.

Some Comments about previous article: - I have explain about how to Insert,delete,update and select data using angularjs.Also posted related to data bind in drop-down list using angularjs

<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 Employee Information-->

            <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 Employee Information-->

        <thead>

              <tr>

                  <td>Employee ID</td>

                  <td> Employee  Name</td>

                  <td> Employee  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>

</body>

</html>

In the above HTML code there is two table one is for create new record and other one is for display information.

I have created one save button to save input field information in database and created validation on all fields to deny blank field.

First I would like to show you how to save information.

SAVE DATA

Now enter information in text field and click on save button to save data, It will fire btnclk() event to save information. Here I am using push method to save information in array for this I have used ng-repeate=emparr and the text boxes are bind by ng-model .all data are saved in array.

$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 = '';

                }

            };

Edit Data

Please see the above image , There is showing edit option .click on edit ,selected data will show you inside text field, now you may change information according you requirement. When you click on the edit button it will pass the details according to index value of the array element.

For more information check below code to read information from 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;

};

UPDATE DATA

You may see in image, There is button to update. Change the value from field and click on update button it will update information in array.

Here , Index key value identify which value should to have update .By clicking on button ng-model pass the value of Id,name and designation value as parameter and it will update in the array.

For more information check the below code to update data.

$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 = '';

            };

DELETE DATA

There is delete button which you can see in image . click on delete button which data you want to delete.

Here I used array index value for delete purpose. When you click on delete button then we use splice method to remove data from array.

For more information please see the below code.

$scope.del = function (id) {

                $scope.emparr.splice(id, 1);

           };