css - md-select 悬停打开选择选项

标签 css angularjs angular-material

是否可以在鼠标悬停时展开 md-select?

例如,我希望此状态选择在鼠标悬停时展开

http://codepen.io/anon/pen/vOmQgj

<md-select placeholder="State" ng-model="ctrl.userState">
        <md-option ng-repeat="state in ctrl.states" value="{{state.abbrev}}">{{state.abbrev}}</md-option>
</md-select>

最佳答案

目前尚不支持此功能,我有点怀疑它是否会被添加到 md-select 组件中 - 尽管您无论如何都应该在 Github 中打开一个票证并解释您的用例.

此功能更有可能存在于今天添加的新 md-menu 组件中:https://material.angularjs.org/0.10.0-rc1/#/demo/material.components.menu

无论哪种方式,我都会打开 Github 票证来进行讨论。


话虽这么说,我整理了一个可能适合您的快速解决方案。

更新的CodePen:http://codepen.io/robertmesserle/pen/qdmQpp

这使用以下 HTML:

<md-select
    placeholder="State"
    ng-model="ctrl.userState"
    ng-mouseenter="ctrl.handleMouseEnter($event)">
  <!-- content -->
</md-select>

以及handleMouseEnter方法:

this.handleMouseEnter = function (event) {
  angular.element(event.target).triggerHandler('click');
}

关于css - md-select 悬停打开选择选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30723090/

相关文章:

grails - 无法使用 AnglurJS 和 Geb 设置输入文本字段

javascript - 范围变量 ng-bind-html 未及时加载

javascript - 在 AngularJS 中使用带有自定义指令的不同 Controller ?

angular - 将扩展面板添加到 Angular Material 表内的行

angularjs - 是否可以在 Angular Material 设计中的选项卡中包含选项卡

html - 导航栏的下拉值应显示该值并呈现在文本上方

CSS 悬停在 li child 上

html - 使列高填充行 Bootstrap 4

Jquery ajax 调用在成功时加载 div 中的整个当前页面

html - 使用对话框显示图片