我有一个用ui-grid-cellNav定义的Angular-UI网格，允许单击时编辑单元格，以及一个自定义模板，用于向特定列显示Angular-UI Bootstrap预先输入，如下所示：
index.html的：
<head>
<script type="text/ng-template" id="TypeaheadTemplate.html">
<div style="height:100%">
<input ng-class="'colt' + col.uid" type="text" class="typeahead form-control" ng-model="MODEL_COL_FIELD"
uib-typeahead="name as item.name for item in grid.appScope.items | filter:$viewValue"
typeahead-editable="false"
typeahead-on-select="grid.appScope.typeaheadSelected(row.entity, $item)"></input>
</div>
</script>
</head>
<body ng-controller="MainCtrl">
<div ui-grid="gridOptions" ui-grid-edit ui-grid-cellNav></div>
</body>
controller.js
app.controller('MainCtrl', function($scope) {
$scope.items = [
{
id: 1,
name: "Item 1",
description: "Example Item #1"
},
{
id: 2,
name: "Item 2",
description: "Example Item #2"
}];
$scope.data = [{}, {}, {}]
$scope.columns = [
{
displayName: "Item",
field: "item.name",
editableCellTemplate: "TypeaheadTemplate.html",
cellTemplate: "TypeaheadTemplate.html",
enableCellEdit: true,
enableCellEditOnFocus: true
},
{
displayName: "Note",
name: "activityId",
enableCellEdit: true,
enableCellEditOnFocus: true
}]
$scope.gridOptions = {
data: $scope.data,
enableRowSelection: false,
showColumnFooter: true,
multiSelect: false,
enableSorting: false,
enableFiltering: false,
gridMenuShowHideColumns: false,
enableColumnMenus: false,
enableCellEditOnFocus: true,
minRowsToShow: 4,
columnDefs: $scope.columns
};
$scope.typeaheadSelected = function(entity, selectedItem) {
entity.item = selectedItem;
}
});
这非常有效，ui-grid-cellNav允许在Notes列上单击编辑，在“列”列中使用预先输入功能。但是，最初单击网格中的预先输入文本框会使文本框变得模糊，直到再次单击该文本框，并且选中Notes（但不可编辑）中的单元格通常会阻止选择文本框。因此，虽然它是功能性的，但它有一些可用性问题。
我已经尝试过使用ng-class属性手动将类应用到文本框中，认为幕后有一些逻辑，它集中了这个类的元素，但无济于事。我也在API文档中找不到任何建议能够覆盖给定列的cellNav行为。删除ui-grid-cellNav指令可修复预先对焦，但也会中断单击编辑。
有没有办法让Angular-UI网格中的预先输入与ui-grid-cellNav很好地结合？
你可以为任何里面有typeaheads的列设置allowCellFocus到false，这样可以确保ui-grid-cellNav最初不会将焦点从typeahead文本框中移开。需要注意的一点是，当cellNav单元格已经具有焦点时，预先输入文本框仍然需要两次单击，这将会破坏网格其余部分的制表符索引。
$scope.columns = [
{
displayName: "Item",
field: "item.name",
allowCellFocus: false, // Property added here
editableCellTemplate: "TypeaheadTemplate.html",
cellTemplate: "TypeaheadTemplate.html",
enableCellEdit: true,
enableCellEditOnFocus: true
},
// ...
];
如果可能，您应该考虑使用ui-select drop-down代替先行者。这些在使用cellNav的网格中表现得更加可靠，但是您仍然需要考虑混乱的制表符索引行为。