EditableCellTemplate в сетке пользовательского интерфейса застрял в режиме редактирования [ng-grid 3.X]

это небольшое продолжение этот вопрос.

Я работаю с новой версией ng-grids ui-grid и у меня возникла проблема с editableCellTemplate. Я использую шаблон, чтобы показать динамический выпадающий список, используя ng-options для редактирования. Это работает нормально, однако ячейка, похоже, застревает в режиме редактирования. Я видел эту проблему раньше при переполнении стека в отношении более старых версий ng-grid. (например, этот пост )

Эти решения обычно заканчиваются указанием на то, что они забыли использовать ng-input="COL_FIELD" в своем выборе.

Я пробовал такие методы, но, похоже, они не работают для ui-grid. Возможно, это потому, что я использую ng-options, а других примеров не было? Вот планкер раскрывающегося списка в сетке. Обратите внимание, что если вы потеряете фокус, ячейка останется в режиме редактирования.

Кто-нибудь сталкивался с этой проблемой с ui-grid и победил ее? Если это так, любая помощь будет принята с благодарностью.


javascript angularjs grid ng-grid angular-ui-grid
person juleekwin    schedule 21.10.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

замените ng-cell-input на ui-grid-edit-dropdown

Это Plunker

Кстати, это шаблон по умолчанию

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

Если нет причин, возможно, вам не нужен собственный шаблон, ознакомьтесь с этим руководством.

person allyusd    schedule 22.10.2014

arrow_upward
1
arrow_downward

Вот небольшое обновление ответа от @allyusd, который в целом правильный, но плункер работает неправильно после того, как вы размоете ячейку.

Измените шаблон на:

<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 здесь. (Обратите внимание, что я снова добавил некоторую отладочную информацию после сетки)

Не считайте это ответом. Это всего лишь небольшая поправка к ответу союзника.

person mainguy    schedule 22.10.2014