Question

我正在尝试在ui-grid的可编辑单元格中实现typeahead.problem是，当我选择typeahead选项之一时，该值不会反映在单元格中。

这是我的部分代码：

$scope.template2='<div class=""><input style="border: none;" type="text" ' +
                                        'class="typeaheadcontrol"' +
                                        'ng-class="\'colt\' + col.index"'+
                                        'ng-model="COL_FIELD"' +
                                        'data-typeahead="state.name as state.name for state in grid.appScope.states | filter:$viewValue | limitTo:8" ' +
                                        'data-typeahead-editable ="false"' +
                                         'ui-grid-editor'+
                                        '/></div> '
    $scope.gridOptions = {
        enableFiltering: true,
        rowTemplate: rowTemplate(),
        data: 'data',
        columnDefs: [
          { name: 'name' },

          { name: 'cumulativeWidgets',editDropdownValueLabel:'name', field: 'widgets', cellFilter: 'formatStatus',
          editableCellTemplate: $scope.template2,
          cellTemplate: '<div class="ui-grid-cell-contents"  ng-dblclick="grid.appScope.openAttributes(rowRenderIndex)" title="TOOLTIP">{{COL_FIELD }}</div>',
          }
        ]
      };

我不知道为什么选择的值不会反映在视图（单元格）中。我的代码是否存在任何问题？

谢谢

Answer 1

添加editableCellTemplate，如下所示

editableCellTemplate :'<div><form name="inputForm"><input  type="INPUT_TYPE"  ng-model="row.entity.name" typeahead="state for state in grid.appScope.states | filter:$viewValue | limitTo:8" class="form-control" ></form></div>'

您可以使用uiGridEditor（ui-grid-editor）或其他指令来提供BEGIN_CELL_EDIT, CANCEL_CELL_EDIT and END_CELL_EDIT个事件。这将在编辑后隐藏文本框。

对于plnkr示例

Click here

Answer 2

这是一个较老的问题，但是我整个上午一直在与ui-grid进行战斗并打字，所以...我将发布对我来说有用的东西。

我在使用typeahead时遇到的主要问题只有几次。我希望通过向下拉列表中的任何内容添加唯一ID来解决它。我的细胞模板变成了这个：

'<div><input id="{{row.entity.$$hashKey}}" type="text" ng-model="MODEL_COL_FIELD" ' +
' typeahead-on-select="grid.appScope.typeaheadSelected(grid, row, $item)" ng-class="{edited: grid.isEdited(row, col)}" ' +
'ng-change="grid.appScope.typeaheadSelected(grid)" ' +
'typeahead="state for state in grid.appScope.primaryKeyValues.{{col.colDef.name}} | filter:$viewValue | limitTo:8" class="form-control"></div>'

Answer 3

我认为这还没有得到解答，所以这就是我要解决的问题。首先，我使用上面建议的typeahead完成了整个editableCellTemplate。哪个有效但我注意到ui-grid-editor指令接管了键处理事件，所以当typeahead显示时，你不能向下箭头或从列表中选择一个项目。如果从editableCellTemplate字符串中删除ui-grid-editor指令，则输入元素在失去焦点后仍然存在，因此我查看了UI网格源并找到了名为uiGridEditor的指令，并注意到注释掉键事件处理程序允许在编辑焦点api后输入键使用键事件以及使用ui-grid。我们使用ui-grid的缩小版本，并且不想更改源代码，因此我从源代码复制了uiGridEditor指令并创建了我自己的指令uiGridEditorExtended，然后我删除了键事件处理程序，并更改了指令将editbleCellTemplate中的name命名为ui-grid-editor-extended，以便它使用mine而不是ui-grid中的。现在它显示了typeahead，允许键入由typeahead使用，并允许ui-grid识别焦距。

如何在角度ui网格中实现Typeahead？

3 个答案: