Angular UI Grid autocomplete with 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%'
    }];
}

回答1:

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

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

and add the function

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

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.

来源：https://stackoverflow.com/questions/31829158/angular-ui-grid-autocomplete-with-ui-grid-cellnav

标签

angularjs

angular-ui-grid