Angular X-Editable 使 editable 字段出现在下一个 table 单元格中

Question

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

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;

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

Answer 1

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

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

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

Demo

更新

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

Angular X-Editable 使 editable 字段出现在下一个 table 单元格中

Angular X-Editable makes editable field appear in next table cell

javascript

angularjs

x-editable

更新