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.

Do you mean when you click EditUDET should appear EditUDET and vice versa? I don't understand the question — lealceldeiro
– lealceldeiro, Commented Feb 24, 2017 at 13:02

Sachila Ranawaka · Accepted Answer · 2017-02-24 13:15:04Z

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>

Collectives™ on Stack Overflow

Angular Inline Editing using angular Material

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related