angular material md-select 显示焦点下拉
angular material md-select to show the dropdown on focus
我有一个表单,有一堆 md-selects,文本字段等等。它是一个大表单,用户希望按 Tab 键并在不同的表单字段中导航。当 md-select 通过按 Tab 键获得焦点时,它不显示下拉列表。在这种情况下,需要额外按下箭头键。有什么方法可以让 select 在不单击鼠标或按下向下键的情况下显示下拉菜单?
我尝试将 link 函数添加到 mdSelect 指令以注册单击或向下键事件,但似乎效果不佳。此外,md-autocomplete 具有完全不同的外观和感觉,因此它不会与其他输入容器一起使用。
此外,还有什么方法可以使 select 下拉菜单显示在输入区域下方。
我喜欢干净的代码,不喜欢在上面使用任何 jquery 函数。提前致谢。
这是结果的屏幕截图:
这是关键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;
});
}
};
});
诀窍是在 select 关闭时将 showOptions
变量设置为 false
,这样它就不会再次打开,直到 blur
为 运行 在指令中。
这里是 CSS 让 select 下拉列表显示在输入区域下方:
md-select-menu {
margin-top: 50px;
}
最后,这是一个工作的 Plunker,http://plnkr.co/edit/FD5u78pC3HbO9UwUOKXR?p=preview。
希望对您有所帮助。如果您有任何问题,请告诉我。
感谢蒂姆哈克的指导。
我稍微修改了指令以隐藏公开的范围变量和 mdOnClose,以便开发人员可以在一个附加属性中实现它。
plnkr.co/edit/m6LGjVronWR2dMQrwGFn?p=preview。
var app = angular.module('app', ['ngMaterial']);
app.directive('myOnFocus', function() {
return {
scope: true,
restrict: 'A',
link: function(scope, elem, attr, ctrl) {
scope.showOptions = true;
if ((attr['mdOnClose'])) {
attr['mdOnClose'] = "showOptions=false;" + (attr['mdOnClose']);
} else {
(attr['mdOnClose']) = "showOptions=false;"
}
elem.bind('focus', function() {
if (scope.showOptions) {
console.log(scope, elem, attr, ctrl)
elem.triggerHandler('click');
}
});
elem.bind('blur', function() {
scope.showOptions = true;
});
}
};
});
虽然已经回答了,但我更喜欢使用装饰器的另一种方法,并想分享它,因为我不太喜欢声明多个指令来控制单个元素的行为。
.config(function($provide) {
$provide.decorator('mdSelectDirective', function($delegate) {
var directive = $delegate[0];
var originalController = directive.controller;
var decoratedController = function($scope, $element){
$element.bind("keyup", function(ev){
if ( ev.keyCode == 9 ){ //Tab key code
$element.triggerHandler('click');
}
});
originalController($scope, $element);
}
directive.controller = decoratedController;
return $delegate;
});
})
我有一个表单,有一堆 md-selects,文本字段等等。它是一个大表单,用户希望按 Tab 键并在不同的表单字段中导航。当 md-select 通过按 Tab 键获得焦点时,它不显示下拉列表。在这种情况下,需要额外按下箭头键。有什么方法可以让 select 在不单击鼠标或按下向下键的情况下显示下拉菜单?
我尝试将 link 函数添加到 mdSelect 指令以注册单击或向下键事件,但似乎效果不佳。此外,md-autocomplete 具有完全不同的外观和感觉,因此它不会与其他输入容器一起使用。
此外,还有什么方法可以使 select 下拉菜单显示在输入区域下方。
我喜欢干净的代码,不喜欢在上面使用任何 jquery 函数。提前致谢。
这是结果的屏幕截图:
这是关键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;
});
}
};
});
诀窍是在 select 关闭时将 showOptions
变量设置为 false
,这样它就不会再次打开,直到 blur
为 运行 在指令中。
这里是 CSS 让 select 下拉列表显示在输入区域下方:
md-select-menu {
margin-top: 50px;
}
最后,这是一个工作的 Plunker,http://plnkr.co/edit/FD5u78pC3HbO9UwUOKXR?p=preview。
希望对您有所帮助。如果您有任何问题,请告诉我。
感谢蒂姆哈克的指导。
我稍微修改了指令以隐藏公开的范围变量和 mdOnClose,以便开发人员可以在一个附加属性中实现它。
plnkr.co/edit/m6LGjVronWR2dMQrwGFn?p=preview。
var app = angular.module('app', ['ngMaterial']);
app.directive('myOnFocus', function() {
return {
scope: true,
restrict: 'A',
link: function(scope, elem, attr, ctrl) {
scope.showOptions = true;
if ((attr['mdOnClose'])) {
attr['mdOnClose'] = "showOptions=false;" + (attr['mdOnClose']);
} else {
(attr['mdOnClose']) = "showOptions=false;"
}
elem.bind('focus', function() {
if (scope.showOptions) {
console.log(scope, elem, attr, ctrl)
elem.triggerHandler('click');
}
});
elem.bind('blur', function() {
scope.showOptions = true;
});
}
};
});
虽然已经回答了,但我更喜欢使用装饰器的另一种方法,并想分享它,因为我不太喜欢声明多个指令来控制单个元素的行为。
.config(function($provide) {
$provide.decorator('mdSelectDirective', function($delegate) {
var directive = $delegate[0];
var originalController = directive.controller;
var decoratedController = function($scope, $element){
$element.bind("keyup", function(ev){
if ( ev.keyCode == 9 ){ //Tab key code
$element.triggerHandler('click');
}
});
originalController($scope, $element);
}
directive.controller = decoratedController;
return $delegate;
});
})