角材md-選擇顯示焦點的下拉列表

Question

我有一個表格，並有一堆md選擇，文本字段等。這是一個很大的形式，用戶期望按Tab鍵並瀏覽不同的表單域。當md-select通過tab鍵按下時獲得焦點，它不會顯示下拉菜單。在這種情況下需要額外的向下箭頭按壓。有沒有辦法讓選擇顯示下拉菜單沒有鼠標點擊或按下按鍵？

我嘗試在mdSelect指令中添加鏈接函數來註冊點擊或向下按鍵事件，但它似乎不起作用。此外，md-autocomplete具有完全不同的外觀和感覺，因此它不會與其他輸入容器一起使用。

此外，還有無法讓選擇下拉菜單出現在輸入區下方。

我喜歡的代碼是乾淨的，並且不希望在其上使用任何jQuery功能。提前致謝。

Answer 1

這裏的結果的屏幕截圖：

這是關鍵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。

希望它有幫助。如果您有任何問題，請告訴我。

Answer 2

感謝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; 
       }); 
      } 
     }; 
    });