ドロップダウンメニューがブラウザウィンドウの下部にある場合は上に移動し、位置に応じて下から上に自動的に切り替えます。

Question

ドロップダウンで問題が発生しましたが、ウィンドウのサイズに合わせて上がってください.i am角度UIグリッドでこの問題が発生します。よりよく理解するにはa linkを参照してください。あなたはこれを自分で処理する必要がしようとしている

<div ng-controller="MyCtrl"> 
<div class="container"> 
    <div class="row"> 
     <div class="span2"> 
      <table class="table"> 
       <tr ng-repeat="row in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]"> 
        <td> <a>{{row}}</a> 

        </td> 
        <td> 
         <ul class="nav"> 
          <!-- To create dropups instead of dropdowns i could add the class "dropup" to the li-element below. --> 
          <!-- But what I need is an inteligent mechanism that decides when to use dropdown and when to use dropup --> 
          <li class="dropdown"> <a class="btn-link dropdown-toggle"> 
           <i class="icon-align-justify"></i> 
          </a> 

           <ul class="dropdown-menu"> 
            <li ng-repeat="menu in [1,2,3]"> <a class="btn-link">{{menu}}</a> 

            </li> 
           </ul> 
          </li> 
         </ul> 
        </td> 
       </tr> 
      </table> 
     </div> 
    </div> 
</div> 

Answer 1

、それは少し厄介かもしれないが、私は正直にあなたがそうでなければそれを行うことができますどのように私は表示されません。私はクラス（またid）アトリビュートを追加して、それを参照することができるようにするには、ng-classを追加する必要があります。 ドロップダウンまたはドロップダウンのいずれかを動的に割り当てることができます。今

<li class="{{'row-' + row}}" ng-class="getClass(row)"> 
    <a class="btn-link dropdown-toggle"><i class="icon-align-justify"></i></a> 
    <ul class="dropdown-menu"> 
     <li ng-repeat="menu in [1,2,3]"> <a class="btn-link">{{menu}}</a></li> 
    </ul> 
</li> 

、あなたのコントローラ内部で、あなたはそれを持っている必要がありますどのクラス、ウィンドウにドロップダウンの相対位置に基づいて、決定するのgetClass関数を作成することができます。

var dropdownHeight = 140; // estimate/calculate the dropdown list's height manually 
$scope.getClass = function (row) { 
    if ($(window).height() - $('.row-' + row).position().top < dropdownHeight) { 
     return 'dropup'; 
    } 
    return 'dropdown'; 
}; 

あなたは行動に満足するまで、高さの値で遊んでいますが、再計算できるようにするには、ウィンドウのサイズ変更（および関連するイベント）にイベントリスナーを追加したい場合があります念頭に置いておくことができます新しい番号に基づいたクラス。