title: How to Add and Edit and Delete table data using Angular Js?
body: <p>I would like to <strong>Add</strong> and <strong>Edit</strong>  and <strong>Delete</strong> table list data.</p>
  
  <p>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.</p>
  
  <p>I searched lot in google but did not get proper solution.</p>
  
  <p>Can some one help me please?</p>
  
  <h2>index.html:-</h2>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"&gt;&lt;/script&gt;
      &lt;body ng-app="myApp" ng-controller="userCtrl"&gt;
  
      &lt;div class="w3-container"&gt;
  
      &lt;h3&gt;Users&lt;/h3&gt;
  
      &lt;table class="w3-table w3-bordered w3-striped"&gt;
        &lt;tr&gt;
          &lt;th&gt;Edit&lt;/th&gt;
          &lt;th&gt;First Name&lt;/th&gt;
          &lt;th&gt;Last Name&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr ng-repeat="user in users"&gt;
          &lt;td&gt;{{ user.fName }}&lt;/td&gt;
          &lt;td&gt;{{ user.lName }}&lt;/td&gt;
           &lt;td&gt;
            &lt;button class="w3-btn w3-ripple" ng-click="editUser()"&gt;Edit&lt;/button&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;button class="w3-btn w3-ripple" ng-click="deleteUser()"&gt;Delete&lt;/button&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
      &lt;br&gt;&lt;/br&gt;
  
      &lt;h3&gt;Create New User&lt;/h3&gt;
  
      &lt;form&gt;
          &lt;label&gt;First Name:&lt;/label&gt;
          &lt;input class="w3-input w3-border" type="text" ng-model="fName" placeholder="First Name"&gt;
        &lt;br&gt;
          &lt;label&gt;Last Name:&lt;/label&gt;
          &lt;input class="w3-input w3-border" type="text" ng-model="lName" placeholder="Last Name"&gt;
          &lt;br&gt;&lt;/br&gt;
  
      &lt;button class="w3-btn w3-green w3-ripple" ng-click="addUser()"&gt;Save Changes&lt;/button&gt;
  
      &lt;/form&gt;
  
      &lt;/div&gt;
  
      &lt;script src= "myUsers.js"&gt;&lt;/script&gt;
  
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <h2>myUsers:-</h2>
  
  <pre><code>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(){
  
        }
  
  });
  </code></pre>