使用角度材質進行角度內嵌編輯

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>