有没有办法将自定义按钮添加到 angular material 自动完成？

Question

我目前使用的是自动完成输入组件，它工作正常但缺少某些功能。该组件通过查询获取所有需要的数据，该查询在页面加载后立即触发并选择预定义的默认条目。然而，始终至少有 >10 个条目可用，但为了显示它们，用户有必要清除自动完成的当前项目选择。清除所选项目后，该组件将显示所有条目并根据用户的输入过滤它们。有没有办法创建自定义版本的自动完成组件，我可以在其中添加一个按钮来显示所有条目，而不管当前选择的项目是什么？

Answer 1

导致此问题的原因不是缺少功能，而是与此组件中浮动标签的使用有关的问题。我在本期 git 上找到了一些非常有用的信息：https://github.com/angular/material/issues/2727

名为 nobol 的用户提供了解决方法，可以解决我的问题。通过使用指令来清除自动完成字段，可以解决问题：

HTML:

<md-autocomplete md-floating-label="LABEL"
             md-selected-item="$ctrl.model" md-search-text="$ctrl.searchText"
             md-selected-item-change="$ctrl.itemChanged($ctrl.model)"
             md-items="item in $ctrl.items" clear-autocomplete
             md-autoselect="true" required>

指令：

angular
  .module('yourModule')
  .directive('clearAutocomplete', clearAutocomplete);
function clearAutocomplete($parse) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      const button = angular.element('<md-button>').addClass('clear-autocomplete');
      button.append('<i class="material-icons">clear</i>');
      element.append(button);
      let searchTextModel = $parse(attrs.mdSearchText);
      scope.$watch(searchTextModel, function(searchText) {
        if (searchText && searchText !== '' && searchText !== null) {
          button.addClass('visible');
        } else {
          button.removeClass('visible');
        }
      });
      button.on('click', function() {
        searchTextModel.assign(scope, undefined);
      });
    }
  }
}

这解决了我的问题，所以感谢 github 上的 nobol！

有没有办法将自定义按钮添加到 angular material 自动完成？

Is there a way to add a custom button to an angular material autocomplete?

angularjs

angular-material

md-autocomplete