輸入占位符的自定義下拉z索引問題

Question

嗨，我為角項目上的國家/地區列表創建了自定義過濾下拉列表。 我將設計輸入分為兩列。 在國家/地區下拉列表中，還有另一個輸入字段，例如電話號碼。 我的問題是，當我在縣輸入中鍵入數據時，數據已成功過濾並顯示在，但沒有輸入占位符的電話仍然可以查看和編輯。 我想下拉顯示為所有其他元素的頂部。

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