如何在角度 md-autocomplete 中设置焦点？答案

【问题标题】：how set focus in angular md-autocomplete?如何在角度 md-autocomplete 中设置焦点？
【发布时间】：2018-08-27 14:15:22
【问题描述】：

我有一个对话框，有几个字段要设置，第一个字段是md-autocomplete，当我单击确定时，所有这些字段都被清除，所以，我想在md-autocomplete 中设置焦点为真，开始填充数据再次。

【问题讨论】：

标签： angularjs angular-material md-autocomplete

【解决方案1】：

试试这个：

JS：

$scope.setFocus = function() {
  setTimeout(function() {
    document.querySelector('#autoCompleteId').focus();
  }, 0);
}

HTML：

<md-autocomplete .............. md-input-id="autoCompleteId">
  <!-- Note the id -->
</md-autocomplete>

<input type="button" value="clickMeForFocus" ng-click="setFocus()" />

需要超时以确保在调用焦点时呈现自动完成组件。

【讨论】：

【解决方案2】：

你可以通过添加属性来做到这一点

md-自动对焦

一个例子：

<md-autocomplete md-autofocus md-selected-item="selectedItem" md-search-text="searchText" md-items="item in getMatches(searchText)" md-item-text="item.display">
    <span md-highlight-text="searchText">{{item.display}}</span>
</md-autocomplete>

参考：here

问候。

【讨论】：

这适用于第一次打开该对话框，当单击确定并清理数据时，焦点丢失并且 md-autofocus 不起作用。我有这个解决方案，当对话框被隐藏时，我称之为 document.getElementById('product-name-input').querySelector('input').focus();