如何使用angularjs使表格列中的列可编辑？

Question

Is it possible to make a tablecolumn editable when using angularjs? I have this table:

<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>

So I have a $scope.fileNames which is an array containing filenames per person for example:

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

I would like to make this 2nd column editable for the user so he can change/delete the files how can I accomplish this?

Answer 1

Use 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>