2017-03-06 97 views
1

我有一个表格,并有一堆md选择,文本字段等。这是一个很大的形式,用户期望按Tab键并浏览不同的表单域。当md-select通过tab键按下时获得焦点,它不会显示下拉菜单。在这种情况下需要额外的向下箭头按压。有没有办法让选择显示下拉菜单没有鼠标点击或按下按键?角材md-选择显示焦点的下拉列表

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

此外,还有无法让选择下拉菜单出现在输入区下方。

我喜欢的代码是干净的,并且不希望在其上使用任何jQuery功能。提前致谢。

回答

3

这里的结果的屏幕截图:

angular material md-select to show the dropdown on focus

这是关键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-initmy-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

希望它有帮助。如果您有任何问题,请告诉我。

+2

谢谢你的朋友。焦点部分的下拉工作正在进行。我修改了一些指令来隐藏暴露的范围变量和mdOnClose,以便开发人员可以在一个附加属性中实现它。 http://plnkr.co/edit/m6LGjVronWR2dMQrwGFn?p=preview。请让我知道如果这是一个正确的方法。但是,CSS更改只是在顶部添加了一个边距,所以当我选择其他选项时,下拉菜单仍会覆盖它。 – jose

1

感谢Tim Harker的指导。

我修改了一些指令来隐藏暴露的范围变量和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; 
       }); 
      } 
     }; 
    });