table 中 UI-select 的下拉列表无法覆盖下一行

Question

我在 ng-repeat table 中有一个 ui-select，我在获取 ui-[=25 的下拉列表时遇到问题=] 覆盖下一个 table 行。目前下一行覆盖了下拉列表，看下面的imglink。谢谢

<table class="table table-bordered" ng-table="tableTest">
    <tbody>
        <tr ng-repeat="testing in $data">
            <div>
                <td data-title="Name">
                    <input type="text" class="form-control" name="name" ng-model="testing.name" placeholder="Name">

                    <div class="form-group">
                        <ui-select ng-model="testing.parent" theme="select2" style="width: 100%">
                            <ui-select-match placeholder="test...">{{$select.selected.name}}</ui-select-match>
                            <ui-select-choices repeat="test.name as test in myData | filter: {name: $select.search}">
                                <span ng-bind-html="''+test.name | highlight: $select.search | unsafe"></span>
                            </ui-select-choices>
                        </ui-select>
                    </div>
                    <br><br><br><br><br>
                </td>
            </div>
        </tr>
</table>

点击 Here 查看当前输出图像。

我想要的是this，下拉列表覆盖下一行

请协助

Answer 1

您需要动态设置 ui-select 的 z-index。您需要将第一个 ui-select 的 z-index 设置为最高，将最后一个设置为最低。您可以尝试通过添加 z-index 属性来替换 9 行：

<ui-select ng-model="testing.parent" theme="select2" style="width: 100%; z-index: {{100 - $index}}">

这段代码所做的是通过动态分配递减的值，为每个 ui-select 添加 z-index，第一个值最高，最后一个值最低。

编辑：您也可以尝试在 <tr> 标签上使用相同的逻辑：

<tr ng-repeat="testing in $data" style="z-index: {{100 - $index}}">

table 中 UI-select 的下拉列表无法覆盖下一行

Dropdown of UI-select in table can't overlay next row

angularjs

ui-select