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单元格进入“Action”列，垃圾箱离开了表..任何想法？

Answer 1

无法实现editable-text指令如何处理td，因为要正常工作，需要将其添加到锚点（a）标记中。因此，我认为这就是你所缺少的。

只需在a标记上添加指令，即可稍微调整您的代码：

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

Demo

更新

Here是一个自定义指令，用于满足您在评论中提到的所需行为。 此版本可让您将文本本身隐藏在可以进行编辑的表单背后。

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

1 个答案:

更新