使用ui-grid-cellnav进行角度UI网格自动完成

时间:2015-08-05 09:56:58

标签: angularjs angular-ui-grid

我的ui网格中有一个自动完成功能正常,但是当使用ui-grid-cellnav指令时,键盘向上和向下箭头不能用于自动完成。

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

和网格列的控制器代码是

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%'
    }];
}

1 个答案:

答案 0 :(得分:0)

您没有为typeahead-on-select设置处理程序。将其更改为

'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)编辑它。不知道为什么,也许有一个解决方法。我的网格打字遇到了同样的问题。

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

无论如何,在这些更改后,我可以双击编辑值,选择带箭头键的状态并更新实体。