AngularJS表格可编辑单元格值无法同步到控制器问题求助

这个问题的核心在于你没用到AngularJS的双向数据绑定机制，而是用了静态的value属性赋值——这只会把初始值渲染到输入框里，但输入框的修改根本不会同步回你的layout对象里。咱们来一步步修改：

问题根源 #

你当前用value="{{layout.Coluna}}"给输入框赋值，这是单向的：只有页面初始化时会把layout.Coluna的值放到输入框里，之后输入框的任何修改都不会反向更新到vm.carregarLayoutTeste里的对应对象。

解决方案 #

只需要把value替换成AngularJS的ng-model指令，同时优化编辑状态的控制逻辑，就能实现双向同步：

修改后的HTML代码 #

<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> 
        <!-- 用ng-model实现双向绑定，调整readonly判断，添加blur事件退出编辑 -->
        <input 
          type="text" 
          ng-model="layout.Coluna" 
          ng-readonly="$index !== eEditable" 
          ng-dblclick="eEditable = $index"
          ng-blur="eEditable = -1"
        /> 
      </td> 
      <td md-cell>{{layout.Status ? "OK":"Verifique a Coluna Correta"}}</td> 
    </tr> 
  </tbody> 
</table>

JS代码保持不变（可选添加体验优化） #

$scope.eEditable = -1; // 默认-1，不匹配任何ng-repeat的$index

关键调整说明 #

1. ng-model="layout.Coluna"：这是双向绑定的核心，输入框的内容变化会自动同步到layout.Coluna，控制器里的vm.carregarLayoutTeste数组也会实时更新。
2. 优化ng-readonly逻辑：把!($index == eEditable)改成$index !== eEditable，逻辑更清晰，只有双击的那一行（对应$index等于eEditable）可以编辑。
3. 添加ng-blur="eEditable = -1"：当输入框失去焦点时，自动退出编辑状态，避免一直保持可编辑状态，提升用户体验。

这样修改后，你双击单元格修改内容，修改的值会立刻同步到控制器的layout对象里，后续提交或者使用这个数据时就能拿到最新值了。

内容的提问来源于stack exchange，提问作者Vinicius Cano