Angular X-Editable 使可编辑字段出现在下一个表格单元格中

Question

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

HTML：

<table class="table table-striped table-bordered">
    <thead>
    <tr>
        <th>Nr.</th>
        <th>Name</th>
        <th>Action</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="users in $ctrl.users"> //user should be editable
        <td>
            {{$index + 1}}
        </td>
        <td editable-text="users">
            {{users}}
        </td>
        <td>
            <div class="btn-group">
                <span ng-click="$ctrl.removeUser($index)" class="glyphicon glyphicon-trash"></span>
            </div>
        </td>
    </tr>
    </tbody>
</table>

<input ng-model="$ctrl.addMe"/>
<button ng-click="$ctrl.addUser()">Add</button>
<p id="errormessage">{{$ctrl.errortext}}</p>

JS：

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;

编辑单元格甚至是可能的，所以点击单元格，输入另一个值，然后点击保存就可以了，但是有一个问题：出现的输入字段出现在下一个表格单元格中，所以它完全把桌子弄乱了。有谁碰巧知道，为什么会发生这种情况以及如何解决？你可以看到它看起来像here。所以 x-editable 单元格进入“操作”列，垃圾从表中移出。有什么想法吗？

Answer 1

无法理解您是如何让 editable-text 指令在 td 上工作的，因为要正常工作，它需要添加到锚 (a) 标记中。因此，我认为这就是你所缺少的。

只需通过在a 标签上添加指令来稍微调整您的代码：

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

Demo

更新

Here 是一个自定义指令，用于适应您在 cmets 中提到的所需行为。 此版本使您可以将文本本身隐藏在可以编辑的表单后面。