單擊按鈕時，如何更改跨度的行以輸入並使用angularjs集中每個輸入

Question

我有一張桌子，上面有2個標簽/輸入（我使用ng-show / ng-hide，可與編輯按鈕配合使用）和2個按鈕（編輯1個按鈕，刪除1個按鈕）。 我想做的是當用戶單擊“編輯”按鈕時，它應該隱藏跨度並顯示輸入（文本框），並專注於第一個輸入。 如果用戶在任一輸入之外單擊（我認為失去焦點，這意味着使用模糊方法），則輸入應返回到跨越更新值的范圍。 這是我創建的，但是我無法弄清其余的內容。 棱角分明的新功能，因此任何幫助都會受到贊賞和投票。

這是html代碼：

<table class="tableGV">
    <tbody>
        <tr>
            <td class="DisplayRowData">
                <span class="LabelText" data-ng-hide="data1">{{data1}}</span>
                <input class="DataText" type="text"data-ng-show="showEditMode" maxLength="1" data-ng-model="editData1" ng-change="cs.ClassCode"/>
           </td>
           <td class="DisplayRowData">
               <span class="LabelText" data-ng-hide="data2">{{data2}}</span>
               <input class="DataText" type="text" data-ng-show="data2" maxlength="50" data-ng-model="data2" />
           </td>
           <td align="right">
               <button type="button" id = "btnEditClassService{{$index}}" data-ng-click="edit(cs, $index)" class="editButton"></button>
               <button type="button" id = "btnDeleteClassService{{$index}}" data-ng-click="delete(cs, $index)" class="deleteButton"></button>
        </tr>
    </tbody>
</table>

在此之后，我不確定要去哪里。 謝謝任何人幫助我。

Answer 1

您可以檢查此plnkr 。 解決方案不是很好，但我認為它滿足了您的要求。

function onEdit(){
  vm.isEdit =  true;
  executeAfterDOMRender(function(){
    document.getElementById('txt1').focus()
  });
}

function onBlur(){
  executeAfterDOMRender(function(){
    var txtIds = ['txt1', 'txt2'];
    var activeElementId = document.activeElement.id;
    if(~txtIds.indexOf(activeElementId)){
      //txt boxes is focued, do nothing here
    } else {
      vm.isEdit = false;
    }
  });
}

function executeAfterDOMRender(callback){
  $timeout(callback);
}