如何使用angularjs使表格列中的列可編輯？

Question

使用angularjs時可以使表格列可編輯嗎？ 我有這張桌子：

<table>
    <thead>
    <tr class="header">
        <th>id</th>
        <th>files</th>
    </tr>
    </thead>
    <tbody ng-repeat="person in persons">
    <tr>
        <td>{{person.id}}</td>
        <td>{{person.fileNames)}}</td>
    </tr>
    </tbody>
</table>

所以我有一個$ scope.fileNames這是一個包含每個人的文件名的數組，例如：

["Koala.jpg","Tulips.jpg","Tulips.jpg","Hydrangeas.jpg","Lighthouse.jpg","Chrysanthemum.jpg"]

我想使用戶可以編輯此第二列，以便他可以更改/刪除文件，我該怎么做？

Answer 1

使用contentEditable

<table>
    <thead>
    <tr class="header">
        <th>id</th>
        <th>files</th>
    </tr>
    </thead>
    <tbody ng-repeat="person in persons">
    <tr>
        <td contentEditable>{{person.id}}</td>
        <td contentEditable>{{person.fileNames)}}</td>
    </tr>
    </tbody>
</table>