AngularJS Material Selectのドロップダウンをどのように配置しますか？

Question

は、私がここにhttp://plnkr.co/bvysoi

<div ng-controller="dropdownController" class="md-padding" ng-cloak> 
    <div layout="row"> 
    <md-input-container> 
     <md-select md-container-class="my-container" ng-model="selected" md-selected-text="displaySelected()" multiple> 
     <md-optgroup> 
      <md-option ng-value="data.label" ng-repeat="data in datas" ng-click="clicked(datas, data)" ng-selected="data.selected">{{data.label}}</md-option> 
     </md-optgroup> 
     </md-select> 
    </md-input-container> 
    </div> 
</div> 

あなたが見ることができるようにplunkerで作られたコードを実行してみてください、これはあなたが

今

」にクリックしてみてください選択メニューをクリックしたときに表示するものですコントリビューション2 "を選択し、"すべてのコントリビューションタイプ "の選択を解除し、ドロップダウンからクリックしてから、セレクトメニューを再度クリックします。あなたが気づいたように、これはあなたが

下に移動し、ドロップの位置を得るものです。私はこれがデフォルトの動作だと思うので、これを変更したいと思っていました。

私の質問は、最初に選択したものに関係なく、最初のスクリーンショットとまったく同じように、選択範囲のすぐ下にドロップを配置する方法です。私はまだAngularJSの新人です。ありがとう！

編集：私はではありません。はjQueryまたは他のライブラリを使用できます。私はAngularJSにのみ限定されています

Answer 1

これはデフォルト動作です。ドロップダウンの位置を変更する場合は、CSSプロパティを変更するためにjqueryを使用してそれを処理する必要があります。また、Materialデザインjsの後にdom操作を実行するように注意しなければなりません。したがって、md-選択要素&のオフセットトップを見つけることによって、あなたはだからあなたのコードは次のように見えるものと属性md-container-class="my-container"によって使用可能になるそのクラスを選択すること与えることができます選択（ここでは20ピクセル）の高さは、あなたのドロップダウンのCSSトップを取得します：

<div layout="row"> 
    <div class="select" ng-click="selclicked()"> 
    <md-input-container> 
     <md-select md-container-class="my-container" ng-model="selected" 
     md-selected-text="displaySelected()" multiple class="my-md-select"> 
     <md-optgroup> 
      <md-option ng-value="data.label" ng-repeat="data in datas" 
      ng-click="clicked(datas, data)" ng-selected="data.selected">{{data.label}} 
      </md-option> 
     </md-optgroup> 
     </md-select> 
    </md-input-container> 
    </div> 
</div> 

selclicked（）関数ます

ここ

$scope.selclicked = function(){ 
    var containerTop = $(".my-md-select").offset().top - 20 + "px"; 
    setTimeout(function(){ 
     $(".my-container").css({'top':containerTop}); 
    }, 50); 

}; 

タイムアウトがMDのJS関数を実行するために必要なプロジェクト&最小限の時間で実装材料設計のためにどのくらいの速アニメーションに依存すべき：ある位置の変更を行っています。あなただけのjavascriptその後、あなたはそれがすべてのブラウザの基本的なサポートを持っているElement.getBoundingClientRect()を使用して、それらの要素のオフセットを見つけるのと同じことを達成することができます使用するように制限をしている場合

：http://plnkr.co/edit/4FSWeAC4Ae4iWfWSCzvG?p=preview

アップデート：ここにあなたのplunkerのバージョンを更新しています。だからあなたの関数が見えるかもしれません：

$scope.selclicked = function(){ 
    var bodyRect = document.body.getBoundingClientRect(); 
    var myElement = document.getElementsByClassName('sel'); 
    var containerTop = myElement[0].getBoundingClientRect().top - bodyRect.top + 'px'; 
    var myContainer = document.getElementsByClassName('my-container'); 
    setTimeout(function(){ 
     angular.element(myContainer).css({'top':containerTop}); 
    }, 50); 

}; 

ここで働いているplunkerリンク：http://plnkr.co/edit/DjFiWJD1FPFzEK0v7siG?p=preview