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

您可以查看this 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);
}

在按钮上单击，如何更改带有跨度的行以输入并使用angularjs

1 个答案: