0

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(){

      }

});
georgeawg
  • 48,608
  • 13
  • 72
  • 95
Krish
  • 4,166
  • 11
  • 58
  • 110
  • I don't know where you searched. Possible duplicate of [Add, Remove & Update specific data In JSON in AngularJS](https://stackoverflow.com/questions/34839697/add-remove-update-specific-data-in-json-in-angularjs) – Ramesh Rajendran Feb 16 '18 at 05:36
  • Please check this https://codepen.io/santoshshinde2012/pen/PQOOOM – Santosh Shinde Feb 16 '18 at 05:52

2 Answers2

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 !!

Santosh Shinde
  • 6,045
  • 7
  • 44
  • 68
-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/

shilpidev
  • 51
  • 4