使用角度材质进行角度内联编辑

Question

我想使用角度材质进行内联编辑。以下是我的代码。

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>

点击编辑输入框后应该出现而不是编辑按钮保存和取消按钮应该是可见的。

Answer 1

向对象数组添加其他字段，并使用该属性隐藏/显示输入和按钮

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>