각 재료 md- 포커스가있는 드롭 다운을 표시하기 위해 선택하십시오.

Question

폼이 있고 md-select, 텍스트 필드 등이 있습니다. 그것은 큰 형태이며 사용자는 탭을 누르고 다른 양식 필드를 탐색 할 것을 기대합니다. 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 속성.

이

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이 지침에서 실행 될 때까지 다시 열리지 않도록 선택이 닫힐 때 false에 showOptions 변수를 설정하는 것입니다

다음은 AngularJS와 지시어입니다.

여기에 입력 영역 아래에 표시하는 선택 드롭 다운을 얻기 위해 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; 
       }); 
      } 
     }; 
    });