输入占位符的自定义下拉 z-index 问题

Question

您好，我已经为 Angular 项目上的国家/地区列表显示创建了自定义过滤下拉列表。我将设计输入分为两列。在国家下拉菜单下，还有另一个输入字段为电话号码。我的问题是当我在县输入数据成功过滤并显示在下时，但手机没有输入占位符仍然可以看到和编辑。我想下拉显示作为所有其他元素的顶部。

 <div class="form-group col-sm-6 z-10">
        <div class="col-sm-12">
            <label ng-show="policyHolder.nationality" class="show-hide">Nationality</label>
            <input type="text" class="form-control ktz-text-input-trp"
            placeholder="Nationality" name="Nationality"
            ng-model="policyHolder.nationality" ng-blur="HideDropList_Nationality()"
            autocomplete="off"
            ng-change="searchNationality(policyHolder.nationality)" required>
            <div id="nationalityDropDown">
                <ul class="list-group" ng-if="ShowNationalityDropDown == true">
                    <li class="list-group-item dropDown_nationality"
                        ng-repeat='Nationality in nationalityListSearchResults track by $index'
                        >
                        <div ng-click="selectedNationality(Nationality)">
                            {{Nationality.content}} ({{Nationality['@code']}})
                        </div>

                    </li>
                </ul>
            </div>
            <span class="ktz-text-error"
            ng-show="policyHolderForm.Nationality.$error.required && isSumbit">Nationality can not be empty !</span>
            <span class="ktz-text-error"
            ng-show="invalidNationality == true">Invalid Nationality!</span>
        </div>
    </div>

    <div class="form-group col-sm-6 z-10">
        <div class="col-sm-12">
            <label ng-show="policyHolder.phone" class="show-hide">Phone</label>
            <input phone-mask type="text" phone-number
            ng-class="{ ktzformerror: (policyHolderForm.phone.$error.required && isSumbit) }"
            class="form-control ktz-text-input-trp" name="phone" placeholder="Phone"
            ng-model="policyHolder.phone" ng-blur="updateFirstTraveller()">
            <!--<span class="ktz-text-error" ng-show="policyHolderForm.phone.$error.required && isSumbit">Phone number can not be empty !</span>-->
            <span class="ktz-text-error"
            ng-show="policyHolderForm.phone.$error.phoneNumber && isSumbit">Phone number must be exactly 8 digits !</span>
        </div>

    </div>

    .dropDown_nationality {
        cursor: pointer;
        background: transparent;
        position: relative;
        z-index: 10;
    }

    #nationalityDropDown ul li {
        font-size: 14px !important;
        display: block;
        z-index: 600 !important;
    }

    #nationalityDropDown ul {
        min-width: 350px !important;
        max-width: 350px !important;
        position: absolute;
        z-index: 600 !important;
        max-height: 300px;
        overflow-y: scroll;
    }


$scope.searchNationality = function (data) {
        var output = [];
        if (data != "" && data != undefined) {
            $scope.ShowNationalityDropDown = true;

            for (var i = 0; i < $scope.nationalityList.length; i++) {
                if ($scope.nationalityList[i].content.toLowerCase().startsWith(data.toLowerCase())) {
                    output.push($scope.nationalityList[i]);
                }
            }
            $scope.nationalityListSearchResults = output;
        } else {
            $scope.ShowNationalityDropDown = false;
            $scope.nationalityListSearchResults = [];
        }
    };

$scope.selectedNationality = function (selected) {
        $timeout(function () {
            $scope.policyHolder.nationality = selected.content;
            $scope.policyHolder.nationality_code = selected['@code'];
        });

    };

Answer 1

这对你有用吗？

angular.module('ddApp', [])
    .controller('ddAppController', function($scope, $timeout){

$scope.nationalityList = [{ content:"countryA", visibility:false }
,{ content:"countryB", visibility:false }
,{ content:"countryC", visibility:false }
,{ content:"countryD", visibility:false }
,{ content:"countryE", visibility:false }
,{ content:"countryF", visibility:false }
,{ content:"countryG", visibility:false }
 ];

        
        $scope.searchNationality = function (data) {
            var output = [];
            if (data != "" && data != undefined) {
                $scope.ShowNationalityDropDown = true;
                
                for (var i = 0; i < $scope.nationalityList.length; i++) {
                    if ($scope.nationalityList[i].content.toLowerCase().startsWith(data.toLowerCase())) {
                        output.push($scope.nationalityList[i]);
                    }
                }
                $scope.nationalityListSearchResults = output;
            } else {
                $scope.ShowNationalityDropDown = false;
                $scope.nationalityListSearchResults = [];
            }
        };
        
        $scope.selectedNationality = function (selected) {
            $timeout(function () {
                $scope.policyHolder.nationality = selected.content;
                $scope.policyHolder.nationality_code = selected['@code'];
                $scope.ShowNationalityDropDown = false;
            });
            
        };
    });

.dropDown_nationality {
        cursor: pointer;
        background: transparent;
        position: relative;
        z-index: 10;
    }

    #nationalityDropDown ul li {
        font-size: 14px !important;
        display: block;
        z-index: 600 !important;
    }

    #nationalityDropDown ul {
        min-width: 350px !important;
        max-width: 350px !important;
        position: absolute;
        z-index: 600 !important;
        max-height: 300px;
        overflow-y: scroll;
        padding-left:0;
        margin-top:0;
    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app = 'ddApp'>
        <div ng-controller= 'ddAppController'>
            <div class="form-group col-sm-6 z-10">
                <div class="col-sm-12">
                    <label ng-show="policyHolder.nationality" class="show-hide">Nationality</label>
                    <input type="text" class="form-control ktz-text-input-trp"
                    placeholder="Nationality" name="Nationality"
                    ng-model="policyHolder.nationality" ng-blur="HideDropList_Nationality()"
                    autocomplete="off"
                    ng-change="searchNationality(policyHolder.nationality)" required>
                    <div id="nationalityDropDown">
                        <ul class="list-group" ng-if="ShowNationalityDropDown == true">
                            <li class="list-group-item dropDown_nationality"
                                ng-repeat='Nationality in nationalityListSearchResults track by $index'
                                >
                                <div ng-click="selectedNationality(Nationality)">
                                    {{Nationality.content}} ({{Nationality['@code']}})
                                </div>

                            </li>
                        </ul>
                    </div>
                    <span class="ktz-text-error"
                    ng-show="policyHolderForm.Nationality.$error.required && isSumbit">Nationality can not be empty !</span>
                    <span class="ktz-text-error"
                    ng-show="invalidNationality == true">Invalid Nationality!</span>
                </div>
            </div>

            <div class="form-group col-sm-6 z-10">
                <div class="col-sm-12">
                    <label ng-show="policyHolder.phone" class="show-hide">Phone</label>
                    <input phone-mask type="text" phone-number
                    ng-class="{ ktzformerror: (policyHolderForm.phone.$error.required && isSumbit) }"
                    class="form-control ktz-text-input-trp" name="phone" placeholder="Phone"
                    ng-model="policyHolder.phone" ng-blur="updateFirstTraveller()">
                    <!--<span class="ktz-text-error" ng-show="policyHolderForm.phone.$error.required && isSumbit">Phone number can not be empty !</span>-->
                    <span class="ktz-text-error"
                    ng-show="policyHolderForm.phone.$error.phoneNumber && isSumbit">Phone number must be exactly 8 digits !</span>
                </div>
            </div>
        </div>
    </div>