md-select on hover打开选择选项

时间:2015-06-09 04:35:04

标签: 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>

1 个答案:

答案 0 :(得分:4)

目前不支持此功能,我怀疑它是否会添加到md-select组件中 - 尽管您应该在Github中打开一张票,并说明您的用例。

此功能更有可能存在于今天添加的新md-menu组件中:http://jsfiddle.net/xs5vrrso/578/

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

话虽这么说,我总结了一个可能适合你的快速解决方案。

更新了CodePen:https://material.angularjs.org/0.10.0-rc1/#/demo/material.components.menu

这使用以下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');
}