eckig material md-wählen Sie, um das Dropdown auf Fokus

Question

Ich habe ein Formular und hat eine Reihe von MD-Selects, Textfelder und so weiter. Es ist ein großes Formular und die Benutzer erwarten, Tab zu drücken und durch verschiedene Formularfelder zu navigieren. Wenn md-select den Fokus über die Tabulatortaste erhält, wird das Dropdown-Menü nicht angezeigt. Ein zusätzlicher Abwärtspfeil ist in diesem Fall erforderlich. Gibt es eine Möglichkeit, die Auswahl zu erhalten, um das Dropdown ohne einen Mausklick oder einen Abwärts-Tastendruck anzuzeigen?

Ich habe versucht, Link-Funktionen zur mdSelect-Direktive hinzuzufügen, um ein Klick- oder Abwärtstasten-Presse-Ereignis zu registrieren, und es schien nicht so gut zu funktionieren. Außerdem hat md-autocomplete ein völlig anderes Aussehen und Gefühl, also passt es nicht zu den anderen Eingabebehältern.

Darüber hinaus ist es sowieso nötig, dass das Dropdown-Menü unterhalb des Eingabebereichs erscheint.

Ich mag den Code sauber zu sein und lieber keine jquery Funktionen darauf verwenden. Danke im Voraus.

Answer 1

Hier ist ein Screenshot der Ergebnisse:

Hier ist der Schlüssel 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> 

Beachten Sie die ng-init, my-on-focus und md-on-close Attribute.

Hier ist die AngularJS Richtlinie:

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

Der Trick ist, die showOptions Variable false einzustellen, wenn die Auswahl geschlossen ist, damit es nicht wieder öffnen, bis blur in der Richtlinie ausgeführt wird.

Hier ist die CSS die Auswahl Dropdown bekommen unter dem Eingabebereich angezeigt werden soll:

md-select-menu { 
    margin-top: 50px; 
} 

Schließlich ist hier eine Arbeits Plunker, http://plnkr.co/edit/FD5u78pC3HbO9UwUOKXR?p=preview.

Ich hoffe, es hilft. Lass es mich wissen, wenn du irgendwelche Fragen hast.

Answer 2

Danke an Tim Harker für die Anleitung.

Ich habe die Direktive ein wenig geändert, um die exponierten Scope-Variablen und die mdOnClose zu verbergen, damit der Entwickler es in einem zusätzlichen Attribut erreichen kann.

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