表中的 UI 选择下拉列表无法覆盖下一行

Question

我在一个ng重复表中有一个ui选择，我在获取ui选择的下拉列表以覆盖下一个表行时遇到问题。当前，下一行覆盖下拉列表，请查看下面的img链接。感谢

<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>

单击此处查看当前输出图像。

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

请协助

Answer 1

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

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

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

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

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