Angular Ui bootstrap 下拉列表拆分按钮问题

Question

我有一个 angular 应用程序，并且集成了 angular-ui-bootstrap，我的问题是下拉链接被表格行阻止，使用 z-index：

 <div class="panel panel-default">
     <div class="panel-body">
        <div class=" pull-right">
             <!-- Split button -->
            <div class="btn-group invoice_new_item_btn_ul" uib-dropdown>
              <button id="split-button" type="button" class="btn btn-danger"> Add Item </button>
              <button type="button" class="btn btn-danger" uib-dropdown-toggle>
              <span class="caret"></span>
            </button>
               <ul class="invoice_new_item_btn_ul uib-dropdown-menu" role="menu" aria-labelledby="split-button">
                   <li role="menuitem"><a href="" ng-click="vm.addNewChoice()">Action</a></li>
                     </ul>
                     </div>
                    </div>


                <div class="table-responsive">
                    <table class="table table-striped" >

                        <thead>
                        <tr>

                            <th></th>
                            <th>Item Name</th>
                            <th>Type</th>


                        </tr>

                        </thead>
                        <tbody id="search_result">

                        <tr class="odd gradeX" ng-repeat="u in vm.patient.patient_finance_item">
                                <td></td>
                                <td ng-bind="u.item_name"></td>
                                <td ng-bind="u.item_type"></td>



                            </tr>
                        </tbody>
                    </table>
                </div>
                </div>
                </div>

css/sass：

.invoice_new_item_btn_ul{
  z-index:1000 !important;
}

Answer 1

uib-dropdown-menu 仅用作属性，而不是类，这就是您的下拉菜单不显示的原因。

https://github.com/angular-ui/bootstrap/blob/master/src/dropdown/dropdown.js#L285-L287