具有可编辑单元格的角度表

时间:2018-05-23 11:50:21

标签: javascript angularjs

我试图用angularJS做一个可编辑的单元格。我设法做了一个可编辑的,但当我编辑值时,不要在控制器中改变。

我正在使用它。

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

在js中我使用它。

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

但是当我向控制器发送信息时,信息的信息在乞讨中是相同的。例如:

单元格1具有值TESTE,我编辑并更改为NEW,当它到达控制器时它的静止测试,有人知道我该怎么办?

1 个答案:

答案 0 :(得分:0)

谢谢Kaddath,我使用了这样的ng-model并且运行良好。

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