Question

我在ng-repeat表中有一个ui-select，我有问题要让ui-select的下拉列表覆盖下一个表行。目前下一行覆盖下拉列表，请查看下面的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>

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

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

请协助

Answer 1

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

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

此代码正在执行的操作是通过动态分配递减值为z-index添加ui-select，第一个最高，最后一个最少。

编辑：您还可以尝试在<tr>代码上使用相同的逻辑：

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

表格中的UI-select下拉列表不能覆盖下一行

1 个答案: