Question

我在Dropdown中遇到问题但是它应该根据窗口大小而上升。我在Angular UI Grid中遇到了这个问题。请参阅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

你将不得不自己处理这个问题，它可能有点乱，但说实话，我不知道你怎么能这样做。我修改了你的li标签，添加类（你也可以使用 id ）属性，以便能够使用jQuery（或者如果你想要的普通javascript）引用它然后添加了 ng-class ，以便能够动态分配下拉列表或 dropup 。

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

您可以使用高度值，直到对行为满意为止，但请记住，您可能希望在窗口调整大小（和相关事件）上添加事件侦听器，以便能够基于此重新计算类。新号码。

如果下拉菜单位于浏览器窗口的底部，则下拉菜单会自动在向下和向上之间切换，具体取决于位置

1 个答案: