使用 ui-grid-cellnav 自动完成 Angular UI 网格 [英] Angular UI Grid autocomplete with ui-grid-cellnav

问题描述

我的 ui 网格中有一个自动完成功能，它工作正常，但是当放置 ui-grid-cellnav 指令时，键盘向上和向下箭头不适用于自动完成.

I have an autocomplete in my ui grid its working fine but when put ui-grid-cellnav directive then keyboard up and down arrow is not working for autocomplete.

<div class="grid nonProductiveTimeGrid" ui-grid="nonProductiveTimeGridOptions" ui-grid-resize-columns style="width: 100%;" ui-grid-edit ui-grid-cellnav ui-grid-auto-resize ui-grid-draggable-rows ui-grid-selection></div>

和网格列的控制器代码是

and controller code for grid column is

var _columnsDefs = function (isLocked) {
    var cols = [{
        field: 'ResponsibleParty',
        displayName: 'Responsible Party',
        enableCellEdit: !isLocked,
        editableCellTemplate: '<div><form name="inputForm"><input type="INPUT_TYPE" typeahead-append-to-body="true" ng-class="\'colt\' + col.uid" ui-grid-editor ui-grid-edit data-ng-model="MODEL_COL_FIELD" name="label" maxlength="100" required validate-required-cell data-typeahead="responsibleParty for responsibleParty in grid.appScope.responsibleParties | filter:$viewValue | limitTo:8 " /></form></div>',
        width: '20%'
    }];
}

推荐答案

您没有 typeahead-on-select 的处理程序.将其更改为

You don't have a handler for the typeahead-on-select. Change that to

'data-typeahead-on-select="grid.appScope.typeaheadSelected(row.entity, $item)" ' +

并添加函数

$scope.typeaheadSelected = function(entity, item) {
    entity.name = item.name; // or whatever you want to do
    //console.log(item);
}

我还必须注释掉这一行才能使其工作，但随后它失去了焦点时对整个文本的自动选择，这意味着您需要双击然后选择所有文本(通过鼠标或 Ctrl+ A) 进行编辑.不知道为什么，也许有一个解决方法.我的 in-grid typeaheads 也有同样的问题.

I also had to comment out this line to make it work, but then it lost the auto-selection of the entire text upon focus, which means you need to double-click and then select all the text (by mouse or Ctrl + A) to edit it. Not sure why, maybe there's a workaround for that. I have had this same problem with my in-grid typeaheads.

//'ui-grid-edit ui-grid-editor ' +

无论如何，在这些更改之后，我可以双击来编辑值，使用箭头键选择一个状态并更新实体.

Anyway after those changes I could double-click to edit the value, select a state with arrow keys and update the entity.

这篇关于使用 ui-grid-cellnav 自动完成 Angular UI 网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！