使用angular / bootstrap中的编辑按钮输入

Question

我的表单中的一个输入需要与表单的其余部分分开编辑。使用angular / bootstrap有更简单的方法吗？

我已经做了一段时间了，而且css是乱七八糟的，而且变得更加混乱，所以我不会厌倦你。但这是html：

<form>
    <div><input type="text" ng-model="input1"></div>
    <div><input type="text" ng-model="input2"></div>
    <div>
        <input type="text" ng-model="input3.val" ng-disabled="!input3.isEditable">
        <input type="button" class="edit-button" ng-click="makeEditable(input3)"/>
    </div>
    <div><input type="text" ng-model="input4"></div>
    <button ng-click="submit()">Submit</button>
</form>

有没有比手动编码更简单的方法来做这样的事情：

Answer 1

您可以添加以下css，以放置编辑按钮，如上图所示。

.container, .inputText {
  position: relative;
 }


 .edit-button {
   position: absolute;
   right: -3px; 
   top:0
}

http://jsbin.com/voxeva/edit?html,css,console,output