angularjs - Angular Material md-select 显示焦点下拉列表

Question

我有一个表单，有一堆 md-selects、文本字段等等。这是一个大型表单，用户希望按 Tab 键并浏览不同的表单字段。当 md-select 通过 Tab 键接收焦点时，它不会显示下拉列表。在这种情况下需要额外的向下箭头按压。有没有办法让选择显示下拉菜单而无需鼠标单击或按下按键？

我尝试将链接函数添加到 mdSelect 指令以注册点击或向下按键事件，但它似乎不起作用。此外，md-autocomplete 具有完全不同的外观和感觉，因此它与其他输入容器不兼容。

此外，无论如何要让选择下拉菜单出现在输入区域下方。

我喜欢干净的代码，不喜欢在上面使用任何 jquery 函数。提前致谢。

Answer 1

这是结果的屏幕截图:



这是关键的 HTML:

<md-input-container md-no-float flex="30">
  <md-select name="favoriteColor" ng-model="color" placeholder="Pick a Color" 
             ng-init="showOptions=true" 
             my-on-focus="showOptions" 
             md-on-close="showOptions=false">
    <md-option value="red">Red</md-option>
    <md-option value="blue">Blue</md-option>
    <md-option value="green">Green</md-option>
  </md-select>
</md-input-container>

请注意 ng-init , my-on-focus , 和 md-on-close属性。

这是 AngularJS 指令:

app.directive('myOnFocus', function() {
  return {
    scope: true,
    restrict: 'A',
    link: function(scope, elem, attr, ctrl) {
      elem.bind('focus', function() {
        if (scope[attr.myOnFocus]) {
          elem.triggerHandler('click');
        }
      });
      elem.bind('blur', function() {
        scope[attr.myOnFocus] = true;
      });
    }
  };
});

诀窍是设置 showOptions变量为 false when the select is closed so it doesn't open again until blur在指令中运行。

这是使选择下拉列表显示在输入区域下方的 CSS:

md-select-menu {
  margin-top: 50px;
}

最后，这是一个工作的Plunker， http://plnkr.co/edit/FD5u78pC3HbO9UwUOKXR?p=preview .

希望能帮助到你。如果您有任何问题，请告诉我。