Create text boxes in table in angular on button click

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?

Arun P Johny · Accepted Answer · 2013-04-30 04:10:26Z

2

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

answered Apr 30, 2013 at 4:10

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Charlie Andrews Over a year ago

Great solution. My only problem is I need to call the function that hits the server as well. Is there a way to call two functions with ng-click?

Charlie Andrews Over a year ago

Thanks a lot! keep being awesome!

Collectives™ on Stack Overflow

Create text boxes in table in angular on button click

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related