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

Question

I'm currently trying to implement X-Editable in my Angular project. What I have is a table, with the possibility to add and delete entries and I want to be able to do edit them as well. What I have is the following:

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;

Editing the cell is even possible, so clicking on the cell, entering another value and then clicking on save does its job, but there is one problem: The input field that appears, appears in the next table cell, so it completely messes up the table. Does anybody happen to know, why this happens and how to fix it? You can see what it looks like here. So the x-editable cell gets to the "Action" column and the trash gets out of the table.. Any ideas?

Answer 1

Can't realize how you got the editable-text directive working on a td since to work properly it requires to be added to an anchor (a) tag. Therefore, I think that's what you were missing.

Just tweak your code a bit by adding the directive on an a tag instead:

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

Demo

Update

Here is a custom directive to accommodate the desired behavior as you mentioned in the comments. This version enables you to conceal the text itself behind the form where editing it is possible.