How to Add and Edit and Delete table data using Angular Js?

Question

I would like to Add and Edit and Delete table list data.

With my knowledge I was able to write the below code for adding a new user and I don't know how to perform the edit and delete operation.

I searched lot in google but did not get proper solution.

Can some one help me please?

index.html:-

<!DOCTYPE html>
<html>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <body ng-app="myApp" ng-controller="userCtrl">

    <div class="w3-container">

    <h3>Users</h3>

    <table class="w3-table w3-bordered w3-striped">
      <tr>
        <th>Edit</th>
        <th>First Name</th>
        <th>Last Name</th>
      </tr>
      <tr ng-repeat="user in users">
        <td>{{ user.fName }}</td>
        <td>{{ user.lName }}</td>
         <td>
          <button class="w3-btn w3-ripple" ng-click="editUser()">Edit</button>
        </td>
        <td>
          <button class="w3-btn w3-ripple" ng-click="deleteUser()">Delete</button>
        </td>
      </tr>
    </table>
    <br></br>

    <h3>Create New User</h3>

    <form>
        <label>First Name:</label>
        <input class="w3-input w3-border" type="text" ng-model="fName" placeholder="First Name">
      <br>
        <label>Last Name:</label>
        <input class="w3-input w3-border" type="text" ng-model="lName" placeholder="Last Name">
        <br></br>

    <button class="w3-btn w3-green w3-ripple" ng-click="addUser()">Save Changes</button>

    </form>

    </div>

    <script src= "myUsers.js"></script>

    </body>

</html>

myUsers:-

angular.module('myApp', []).controller('userCtrl', function($scope) {

    $scope.users = [
    {id:1, fName:'Hege', lName:"Pege" },
    {id:2, fName:'Kim',  lName:"Pim" },
    {id:3, fName:'Sal',  lName:"Smith" },
    {id:4, fName:'Jack', lName:"Jones" },
    {id:5, fName:'John', lName:"Doe" },
    {id:6, fName:'Peter',lName:"Pan" }
    ];

    $scope.addUser=function(){
        $scope.users.push({
            'fName':users.fName,
            'lName':users.lName,
        });
       }

    $scope.editUser=function(){

      }

    $scope.deleteUser=function(){

      }

});

I don't know where you searched. Possible duplicate of Add, Remove & Update specific data In JSON in AngularJS — Ramesh Rajendran
– Ramesh Rajendran, Commented Feb 16, 2018 at 5:36

Santosh Shinde · Accepted Answer · 2018-02-16 05:47:34Z

1

Please check the tutorial from here.

For your reference use following code and check the codepen to here.

In template

     <tr ng-repeat="user in users">
      <td>
       <span ng-if="!user.editFlag">{{ user.fName }}</span>
       <input ng-if="user.editFlag" ng-model="user.fName"/>
      </td>
      <td>
      <span ng-if="!user.editFlag">{{ user.fName }}</span>
      <input ng-if="user.editFlag" ng-model="user.lName"/>
      </td>
      <td>
          <button class="w3-btn w3-ripple" ng-click="editUser($index)"><span ng-if="!user.editFlag">Edit<span><span ng-if="!user.editFlag">Save</span></button>
      </td>
      <td>
          <button class="w3-btn w3-ripple" ng-click="deleteUser($index)">Delete</button>
      </td>
    </tr>

In your controller

    // edit data
    $scope.editUser = function (index) {

        if($scope.users.length){
          // its checking with your edit flag to save or edit
          $scope.users[index].editFlag = !$scope.users[index].editFlag;

        }

    };
    // Delete data
    $scope.deleteUser = function (index) {

        // Remove from main records (using index)
        if($scope.users.length){
          $scope.users.splice(index, 1);
        }
    };

Please check this sample to here.

Hopes this will help you !!

edited Feb 16, 2018 at 5:47

answered Feb 16, 2018 at 5:28

Santosh Shinde

6,0539 gold badges46 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ramesh Rajendran Over a year ago

Not for me. It needs OP. OP need a flag variable to show and hide the editable fields inside the table.

Santosh Shinde Over a year ago

you will use flag in your user object iteslf

Ramesh Rajendran Over a year ago

Exactly this : stackoverflow.com/questions/34839697/…

Santosh Shinde Over a year ago

yeah maybe u will check this javasavvy.com/angularjs-table-form-edit-tutorial

Santosh Shinde Over a year ago

Let us continue this discussion in chat.

shilpidev · Accepted Answer · 2018-02-16 05:59:33Z

-1

These changes will make addUser functionality work

   $scope.addUser=function(index){
      if(index){
      $scope.users[index].fName=$scope.fName;
      $scope.users[index].lName=$scope.lName;
    }
    else{
    $scope.users.push({
        'fName':$scope.fName,
        'lName':$scope.lName,
    });
   }
   $scope.editMode=false;
    $scope.fName='';
    $scope.lName='';     
}

    $scope.editUser=function(index){
    $scope.editMode=true;
    $scope.editIndex=index;
    $scope.fName=$scope.users[index].fName;
    $scope.lName=$scope.users[index].lName;
}

$scope.deleteUser=function(index){
   $scope.users.splice(index,1)
}

Here is working version of above problem with changes in html and js code

https://embed.plnkr.co/ecKSDwW2hfU9t7cj4rZP/

edited Feb 16, 2018 at 5:59

answered Feb 16, 2018 at 5:35

shilpidev

514 bronze badges

6 Comments

shilpidev Over a year ago

Html file do have some changes .You can go through plunker link

Krish Over a year ago

Bu duplicate records should not allow @shilpidev

shilpidev Over a year ago

i didnt get on how you are putting duplicate records check ? i mean is it 'id' or 'fName'?

Krish Over a year ago

using id i would like to check

shilpidev Over a year ago

step 1: prnt.sc/ifg0h5 step2: prnt.sc/ifg085 step 3: prnt.sc/ifg0yd edit seems to work fine. Dont get where its stuck

|

Collectives™ on Stack Overflow

How to Add and Edit and Delete table data using Angular Js?

index.html:-

myUsers:-

2 Answers 2

5 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

index.html:-

myUsers:-

2 Answers 2

5 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related