Angular table with editable cell

Question

I'm trying to do a editable cell with angularJS. I managed to do one editable, but when i edit the value dont change in the controller.

I'm using this.

<table md-table>
  <thead fix-head md-head md-order="query.order">
    <tr md-row>
      <th md-column style="box-sizing: content-box"><span>Item</span></th>
      <th md-column style="box-sizing: content-box"><span>Coluna do Excel</span></th>
      <th md-column style="box-sizing: content-box"><span>Status</span></th>
    </tr>
  </thead>

  <tbody md-body>
    <tr md-row ng-repeat="layout in vm.carregarLayoutTeste | filter: filter.search | orderBy: query.order">
      <td md-cell>{{layout.Nome}}</td>
      <td>
        <input type="text" value="{{layout.Coluna}}" ng-readonly='!($index == eEditable)' ng-dblclick="eEditable = $index"/>
    </td>
      <td md-cell>{{layout.Status ? "OK":"Verifique a Coluna Correta"}}</td>
    </tr>
  </tbody>
</table>

And in the js i'm using this.

 $scope.eEditable = -1; //-1 by default. It doesn't match any $index from ng-repeat

But when i send information to the controller the information of the cell its the same in the begging. Example:

The cell 1 has valuea TESTE, i edit and change to NEW, when it reaches the controller its still teste, someone know what can i do?

What you are looking for is probably "two way data binding", using `ng-model`, [see simple examples here](https://stackoverflow.com/a/30590581/7393478) — Kaddath, May 23 '18 at 12:04
So i need to put in my input where the editable something like this? ng-model="vm.coluna(layout)" — Vinicius Cano, May 23 '18 at 12:10
reproduce it on a plunker so we can check the issue and the controller code — Panos K, May 23 '18 at 12:10
With your code it should work with `ng-model="layout.Coluna"`, if not, give us a feedback. I sometimes mess between angularjs and angular edge cases — Kaddath, May 23 '18 at 12:26

score 0 · Answer 1 · edited May 23 '18 at 13:12

0

Thanks Kaddath, i used ng-model like this and worked fine.

 <td>
    <input type="text" value="{{layout.Coluna}}" ng-readonly='!($index == eEditable)' ng-model="layout.Coluna" ng-dblclick="eEditable = $index"/>
 </td>

edited May 23 '18 at 13:12

yunandtidus

3,847
3
29
42

answered May 23 '18 at 12:25

Vinicius Cano

55
7

You're welcome! With `ng-model` set, `value="{{layout.Coluna}}"` is probably unnecessary now – Kaddath May 23 '18 at 12:40

Angular table with editable cell

1 Answers1