On Button Click, how do I change row with span to input and focus each input using angularjs

Question

I have a table, with 2 labels/inputs (i use a ng-show/ng-hide which works with the edit button), and 2 buttons (1 button is edit, and 1 button is delete). What i want to do is when the user clicks the edit button, it should hide the spans and shows the inputs(textboxes) and focus on the first input. If the user clicks outside of either inputs, (in my opinion, loses focus which mean using blur method), then the inputs should turn back to span with the updated values. Here is what I have created, but I can't figure out the rest. New to angular so any help will be appreciated and voted.

This is the html code:

<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>

after this, i am not sure where to go. Thanks for anyone to help me.

Answer 1

you can check this plnkr . The solution is not elegant but I think it sastify your requirement.

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);
}