AngularJS材质-md-autocomplete隐藏了部分建议

Question

我对AngularJS材质的md-autocomplete有问题。实际上，我在使用md-virtual-repeater-container时遇到麻烦，md-autocomplete使用它来呈现带有建议的下拉列表。

此元素未显示下拉列表中显示的建议文本的全部内容。

这是屏幕截图：

此处显示了建议，但被添加了“ ...”。

我尝试在md-autocomplete元素上使用md-menu-class属性，但这无法正常工作，因为它只是为md-virtual-container内部的元素赋予样式，但没有任何作用来生长md-virtual-container。

我需要的解决方案是通过某种方式使md-virtual-container增长，以适应md-autocomplete显示的建议。

这是一个可与https://codepen.io/aee/pen/ejgxmY一起玩的codepen

这是Codepen上的代码：

(function () {
  'use strict';
  angular
      .module('MyApp')
      .controller('CustomInputDemoCtrl', DemoCtrl);

  function DemoCtrl ($timeout, $q) {
    var self = this;

    self.readonly = false;
    self.selectedItem = null;
    self.searchText = null;
    self.selectedVegetables = [];
    self.numberChips = [];
    self.numberChips2 = [];
    self.numberBuffer = '';

    self.itemList = [
      {t:"aaaa"},
      {t:"bbbbbbbb"},
      {t:"cccccccccccccccc"},
      {t:"dddddddddddddddddddddddddddd"},
      {t:"eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee"},
      {t:"ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff"},
      {t:"eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee"},
      {t:"dddddddddddddddddddddddddddd"},
      {t:"cccccccccccccccc"},
      {t:"bbbbbbbb"},
    ]
  }
})();

.larger-width {
  with: 1000px;
}

<div ng-controller="CustomInputDemoCtrl as ctrl" layout="column" class="chipsdemoCustomInputs" ng-app="MyApp">

  <md-content class="md-padding" layout="column" style="background-color: lightgray; width: 250px">
      <md-autocomplete 
             md-selected-item="ctrl.selectedItem" 
             md-search-text="ctrl.searchText" 
             md-items="item in ctrl.itemList" 
             md-item-text="item.t" 
             placeholder="Search"
             md-floating-label="Select One">
        <md-item-template>
            <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">
                {{item.t}}
            </span>
        </md-item-template>
        <md-not-found>
            <span>No dataaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.</span>
        </md-not-found>
      </md-autocomplete>
  </md-content>
</div>

Answer 1

1. 获取自动填充中最长的元素
2. 每次使用以下非常有用的功能调度自动完成列表时，缩放md-autocomplete：Calculate text width with JavaScript
3. 利润

另请参阅此概念证明，即缩放md-autocomplete的宽度有效（https://codepen.io/cyniikal/pen/jpJjzB）

HTML

<md-autocomplete 
         md-selected-item="ctrl.selectedItem" 
         md-search-text="ctrl.searchText" 
         md-items="item in ctrl.itemList" 
         md-item-text="item.t" 
         placeholder="Search"
         md-floating-label="Select One" id='it-works'>

CSS

#it-works {
    width: 1000px;
}

md-content {
    overflow-x: hidden;
}