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

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){ 
 
\t $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>