Angular Inline Editing using angular Material

Question

I want to do inline editing using angular material. Below is my code.

usertypearray = [{
        Id: 1,
        Name: "bhushan",
        Color: 1
    },
    {
        Id: 2,
        Name: "suryakant",
        Color: 2
    }
 ];
<tr ng-repeat="x in usertypearray">
   <td>
      <span>{{x.Name}}</span>
   </td>
   <td>
      <div layout="row" layout-xs="column">
         <div flex="40">
            <md-button flex="3" class="md-primary md-fab" title="edit" ng-click="EditUDET()">E</md-button>
         </div>
         <div flex="10">
            <md-button flex="3" class="md-primary md-fab" title="delete" ng-click="DeleteUDET()">A</md-button>
         </div>
      </div>
   </td>
</tr>

after clicking on edit input box should appear the instead of edit button save and cancel button should be visible.

Answer 1

Add additional field to object array and use that property to hide/show inputs and buttons

angular.module("app",[])
.controller("ctrl",function($scope){
	$scope.usertypearray = [{
        Id: 1,
        Name: "bhushan",
        Color: 1,
        showEdit : true
    },
    {
        Id: 2,
        Name: "suryakant",
        Color: 2,
        showEdit : true
    }
 ];
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <table>
    <tr ng-repeat="x in usertypearray">
       <td>
          <span>{{x.Name}}</span>
       </td>
       <td>
          <div>
             <div>
                <button ng-show="x.showEdit"  ng-click="x.showEdit = !x.showEdit">Edit</button>
             </div>
             <div >
                <input ng-show="!x.showEdit" type="text" />
                <button ng-show="!x.showEdit">Save</button>
                <button ng-show="!x.showEdit">Cancel</button>
             </div>
          </div>
       </td>
    </tr>
  </table>
</div>