angularjs - 有没有办法将自定义按钮添加到角度材料自动完成？

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！