Javascript 角度X-可编辑使可编辑字段显示在下一个表格单元格中

我目前正在尝试在我的Angular项目中实现X-Editable。我拥有的是一个表，可以添加和删除条目，我希望能够编辑它们。我所拥有的是：

HTML:

---

编辑单元格甚至是可能的，因此单击单元格，输入另一个值，然后单击“保存”即可完成其工作，但有一个问题：出现的输入字段会出现在下一个表格单元格中，因此它会完全弄乱表格。有人知道为什么会发生这种情况以及如何解决吗？你可以看到它是什么样子。因此，x-editable单元格进入“Action”列，垃圾从表中清除。。有什么想法吗？

无法了解如何使

可编辑文本

指令在

td

上工作，因为要正常工作，需要将其添加到锚（

a

）标记中。因此，我认为这就是你所缺少的

只需在

a

标记上添加指令，即可稍微调整代码：

<td>
   <a href="#" editable-text="user">
     {{user}}
   </a>
</td>

更新

---

是一个自定义指令，用于适应您在注释中提到的所需行为此版本允许您将文本隐藏在表单后面，以便进行编辑。

您可以创建一个小提琴或琴键吗？首先感谢您，现在它至少在同一个单元格中，但是有没有办法立即用新文本替换旧文本？那么现在，要编辑的文本在下面被复制了，有没有办法让原始文本也可以直接编辑（或者至少让它看起来像这样）？我认为x-editable指令不允许您这样做。但是，您可以制定自己的自定义指令来展示这种行为。AngularJS指令为您提供了很大的灵活性和强大的功能，如果事实上，它们也很容易学习。事实上，我会制作一个小提琴来演示您如何做到这一点，如果您愿意的话。如果您能够做到这一点，那就太好了。

class UserlistController{
    constructor(){
        this.users=["John","Peter","Julia"];
        this.errortext="";
    }

    addUser(){
        this.errortext="";
        if(this.users.indexOf(this.addMe)==-1){
            this.users.push(this.addMe);
        }else{
            this.errortext="The user does already exist!";
        }
    }

    removeUser(user){
        this.users.splice(user,1);
        this.errortext = "";
    }

}

export default UserlistController;

<td>
   <a href="#" editable-text="user">
     {{user}}
   </a>
</td>