带有ui-grid-cellnav的Angular UI Grid自动完成 [英] 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%'
}];
}
推荐答案
您没有用于预选类型的处理程序.将其更改为
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)进行编辑.不知道为什么,也许有解决方法.我的网格内预先输入也遇到了同样的问题.
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 Grid自动完成的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!