在按钮单击时以角度创建表格中的文本框

Question

I want to be able to click a button on a table and update the row information. I have the back-end all set up to do this. I am just having trouble being able to get at the table generated by angular. Here is my html template:

<br />
<table id="recordTable" border="1px">
    <tr><td ng-repeat="column in columns"><strong>{{column.column_name}}</strong></td>          </tr>
    <tr ng-repeat="record in records">
        <td ng-repeat="cell in record.cells">  {{cell}}  </td>
        <td><button ng-click="delete($index)">Delete</button></td>
        <td><button ng-click="update($index)">Update</button></td>
    </tr>
</table>
<br />

When I call the function update($index) , I would like to be able to turn the text that is currently filled with {{column.column_name}} into a text input with the {{column.column_name}} as the default text. I could not find anything in the Docs for this. Any thoughts?

Answer 1

I've made a slight change to the record.cells array, now it is [{value : 'Value1'},{value : 'Value2'}]

<table id="recordTable" border="1px">
    <tr>
        <td ng-repeat="column in columns">
            <strong>{{column.column_name}}</strong>
        </td>
    </tr>
    <tr ng-repeat="record in records">
        <td ng-repeat="cell in record.cells">
          <span ng-show="mode != 'edit'">{{cell.value}}</span>
          <input ng-show="mode == 'edit'" ng-model="cell.value" />
        </td>
        <td><button ng-click="delete($index)">Delete</button></td>
        <td>
          <button ng-show="mode != 'edit'" ng-click="mode = 'edit'">Update</button>
          <button ng-show="mode == 'edit'" ng-click="mode = null">Save</button>
        </td>
    </tr>
</table>

Demo: Plunker