Question

这是this question的轻微延续。

我正在使用ng-grid新版本ui-grid，我遇到了editableCellTemplate的问题。一世我正在使用模板显示动态下拉列表，使用ng-options进行编辑。这工作正常，但单元格似乎陷入编辑模式。我之前在堆栈溢出方面看到过这个问题，与旧版本的ng-grid有关。（如this帖子）

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

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

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

Answer 1

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

Here is Plunker

BTW，这是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。

Answer 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回答的温和修正。

ui-grid中的EditableCellTemplate陷入编辑模式[ng-grid 3.X]

2 个答案: