Angular UI-Grid单元格模板问题：始终可编辑输入框提交无值

我之前也碰到过类似的需求，UI-Grid默认的双击编辑逻辑确实不适用这种“一直可编辑”的场景，不过通过自定义单元格模板就能搞定，关键是要把输入框的值正确绑定到表格的数据源，这样提交时就能拿到最新的内容了。

1. 核心解决方案：自定义单元格模板 #

给qty列配置cellTemplate，直接渲染一个始终可见的文本输入框，并且通过ng-model绑定到当前行的业务数据属性上，确保输入内容实时同步到数据源。

2. 修改后的完整列定义示例 #

把你的列定义里的qty列替换成如下配置即可：

vm.gridColumnDefs = [
  {field: 'barcode', name: 'Barcode'},
  {field: 'productname', name: 'Product Name'},
  {field: 'categoryname', name: 'Category Name'},
  {field: 'suppliername', name: 'Supplier Name'},
  {field: 'sticks', name: 'Sticks'},
  // 配置始终可编辑的qty列
  {
    field: 'qty',
    name: 'Quantity',
    cellTemplate: '<div class="ui-grid-cell-contents">' +
                    '<input type="text" ng-model="row.entity.qty" style="width:100%; border:none; background:transparent; padding:0;">' +
                  '</div>',
    // 禁用默认的双击编辑触发（自定义模板后无需依赖默认编辑逻辑）
    enableCellEdit: false
  }
];

3. 为什么之前取不到值？ #

你之前配置后拿不到值，大概率是因为模板没有正确绑定到row.entity的属性。UI-Grid的单元格上下文里，当前行的业务数据是row.entity，必须用ng-model="row.entity.qty"才能把输入值同步到你的数据源对象中，而不是直接写ng-model="qty"（那样会绑定到模板的局部作用域，和你的业务数据脱节）。

4. 验证取值是否正常 #

当用户修改输入框内容后，你可以打印vm.gridOptions.data（假设你的表格数据源存在这个变量里），就能看到对应行的qty字段已经更新成用户输入的内容了，提交时直接使用这个数据源即可。

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