1

現在、正常に動作するが特定の機能が欠けているオートコンプリート入力コンポーネントを使用しています。このコンポーネントは、ページが読み込まれるとすぐに実行されるクエリによって必要なすべてのデータを取得し、事前定義されたデフォルト エントリを選択します。ただし、常に少なくとも 10 を超えるエントリが利用可能ですが、それらを表示するには、ユーザーがオートコンプリートの現在のアイテム選択をクリアする必要があります。選択したアイテムがクリアされると、コンポーネントはすべてのエントリを表示し、ユーザーの入力に応じてそれらをフィルタリングします。現在選択されているアイテムに関係なく、すべてのエントリを表示するボタンを追加できるオートコンプリート コンポーネントのカスタマイズ バージョンを作成する方法はありますか?

4

1 に答える 1

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に感謝します!

于 2016-07-12T11:12:45.673 に答える