ui-grid 中的 EditableCellTemplate 卡在编辑模式 [ng-grid 3.X]答案

【问题标题】：EditableCellTemplate in ui-grid stuck in edit mode [ng-grid 3.X]ui-grid 中的 EditableCellTemplate 卡在编辑模式 [ng-grid 3.X]
【发布时间】：2014-10-22 22:25:32
【问题描述】：

这是this question 的轻微延续。

我正在使用 ng-grids 新版本 ui-grid，并且遇到了可编辑单元模板的问题。我我正在使用模板显示使用 ng-options 进行编辑的动态下拉列表。这很好用，但是单元格似乎卡在了编辑模式中。我之前在与旧版本的 ng-grid 相关的堆栈溢出中看到过这个问题。（如this 帖子）

这些解决方案通常最终会指出他们忘记在选择中使用ng-input="COL_FIELD"。

我已经尝试过这样的方法，但它似乎不适用于 ui-grid。也许是因为我正在使用 ng-options 而其他示例没有？这是网格中下拉列表的plunker。请注意，如果您失去焦点，单元格仍处于编辑模式。

有没有人遇到过 ui-grid 的这个问题并克服了它？如果是这样，任何帮助将不胜感激。

【问题讨论】：

标签： javascript angularjs grid ng-grid angular-ui-grid

【解决方案1】：

将 ng-cell-input 替换为 ui-grid-edit-dropdown

Here is Plunker

顺便说一句，这是default template

<div>
  <form name="inputForm">
    <select ng-class="'colt' + col.uid" ui-grid-edit-dropdown ng-model="MODEL_COL_FIELD" ng-options="field[editDropdownIdLabel] as field[editDropdownValueLabel] CUSTOM_FILTERS for field in editDropdownOptionsArray"></select>
  </form>
</div>

如果没有原因，可能不需要自定义模板，请查看this tutorial。

【讨论】：

【解决方案2】：

这里是对@allyusd 答案的一些更新，这通常是正确的，但是在您模糊单元格后，plunker 无法正常工作。

将模板更改为：

<div>
    <select ui-grid-edit-dropdown ng-class="'colt' + $index" ng-model="MODEL_COL_FIELD" data-ng-options="d.type as d.type for d in getExternalScopes().genderTypes">
        <option value="" selected disabled>Choose Gender</option>
    </select>
</div>

尤其是data-ng-options="d.type as d.type...部分

这只会将类型传递给您的模型。

在此处查看（略微）分叉的Plunker。（注意我在网格后面又加了一些调试信息）

不要将此视为答案。这只是对 allyusds 答案的轻微修正。

【讨论】：