这里的结果的屏幕截图:
这是关键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;
});
}
};
});
的诀窍是,当选择关闭,直到blur
在指令运行它不会再次开到showOptions
变量设置为false
。
这里的CSS来获得选择下拉菜单出现在输入区域下面:
md-select-menu {
margin-top: 50px;
}
最后,这里的工作Plunker,http://plnkr.co/edit/FD5u78pC3HbO9UwUOKXR?p=preview。
希望它有帮助。如果您有任何问题,请告诉我。
谢谢你的朋友。焦点部分的下拉工作正在进行。我修改了一些指令来隐藏暴露的范围变量和mdOnClose,以便开发人员可以在一个附加属性中实现它。 http://plnkr.co/edit/m6LGjVronWR2dMQrwGFn?p=preview。请让我知道如果这是一个正确的方法。但是,CSS更改只是在顶部添加了一个边距,所以当我选择其他选项时,下拉菜单仍会覆盖它。 – jose