在 AngularJS UI-grid 中使用 typeahead 和 cellNav答案

【问题标题】：Using typeahead in AngularJS UI-grid with cellNav在 AngularJS UI-grid 中使用 typeahead 和 cellNav
【发布时间】：2018-08-30 05:31:26
【问题描述】：

我有一个使用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;
    }
});

Example Plunker

这很好用，ui-grid-cellNav 允许在 Notes 列上单击编辑，并且在 Items 列中进行预输入功能。但是，最初单击网格中的预输入文本框会使文本框模糊，直到再次单击它，并且保持 Notes 中的单元格处于选中状态（但不可编辑）通常会阻止文本框被选中。因此，虽然它功能齐全，但存在一些可用性问题。

我已经尝试使用ng-class 属性手动将类应用到文本框，认为有一些幕后逻辑将元素集中在这个类上，但无济于事。我在 API 文档中也找不到任何建议能够覆盖给定列的 cellNav 行为的内容。删除 ui-grid-cellNav 指令修复了预先输入的焦点，但也破坏了单击编辑。

有没有办法让 Angular-UI 网格中的预输入与 ui-grid-cellNav 很好地配合？

【问题讨论】：

标签： angularjs angular-ui-bootstrap angular-ui-grid angular-ui-typeahead

【解决方案1】：

您可以将allowCellFocus 设置为false 用于任何包含预输入的列，这将确保ui-grid-cellNav 不会将焦点从预输入文本框移开最初。需要注意的一点是，当 cellNav 单元格已经获得焦点时，预输入文本框仍需要单击两次，这会扰乱网格其余部分的选项卡索引。

$scope.columns = [
  {
    displayName: "Item",
    field: "item.name",
    allowCellFocus: false, // Property added here
    editableCellTemplate: "TypeaheadTemplate.html",
    cellTemplate: "TypeaheadTemplate.html",
    enableCellEdit: true,
    enableCellEditOnFocus: true
  },
  // ...
];

Updated Plunker

如果可能，您应该考虑使用ui-select drop-down 代替预输入。这些在带有 cellNav 的网格中表现得更加可靠，但是您仍然需要考虑混乱的标签索引行为。

【讨论】：