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！

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

1 个答案: