Question

我正在使用AngularJS下拉列表，它没有问题。但是当我想在对话框中打开它时，它并没有显示结果。这可能是什么原因？

Answer 1

这是脚本：

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
    function CountryStateCityCtnl($scope) {
        $scope.countries = {
            'India': {
                'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'],
                'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'],
                'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur']
            },
            'USA': {
                'Alabama': ['Montgomery', 'Birmingham'],
                'California': ['Sacramento', 'Fremont'],
                'Illinois': ['Springfield', 'Chicago']
            },
            'Australia': {
                'New South Wales': ['Sydney'],
                'Victoria': ['Melbourne']
            }
        };
        $scope.GetSelectedCountry = function () {
            $scope.strCountry = document.getElementById("country").value;
        };
        $scope.GetSelectedState = function () {
            $scope.strState = document.getElementById("state").value;
        };
    }
</script>

以下是视图的某些部分：

        <div ng-controller="CountryStateCityCtnl">
            <table style="border:none; width:100%;">
                <tbody>
                    <tr>
                        <th><font color="#656565">Yeni Üye</font> </th>
                    </tr>
                    <tr>
                        <td align="right"><label for="UserName">İsim:</label></td>
                        <td><input type="text" name="UserName" id="UserName" /></td>
                    </tr>

                    <tr>
                        <td align="right" ><label for="UserSurname">Soyisim:</label></td>
                        <td><input type="text" name="UserSurname" id="UserSurname" /></td>
                    <tr>
                        <td align="right"><b>Şehir:</b></td>
                        <td>
                            <select id="country" ng-model="statessource" ng-options="country for (country, states) in countries" ng-change="GetSelectedCountry()"><option value=''>Select</option></select>
                            <label >Bayi:</label>
                            <select id="state" ng-disabled="!statessource" ng-model="citiessource" ng-options="state for (state,city) in statessource" ng-change="GetSelectedState()"><option value=''>Select</option></select>


                        </td>

                    </tr>
                    <tr>
                        <td align="right" ><label for="UserMail">E-Mail:</label></td>
                        <td>
                            <input type="email" name="UserMail" id="UserMail" />
                            <select id="city" ng-disabled="!citiessource || !statessource" ng-model="city"><option value=''>Select</option><option ng-repeat="city in citiessource" value='{{city}}'>{{city}}</option></select>
                        </td>
                    </tr>

                    <tr>
                        <td align="right"><label for="UserPassword">Şifre:</label></td>
                        <td><input type="password" name="UserPassword" id="UserPassword" /></td>
                    </tr>

                    <tr>
                        <td align="right"><label for="ConfirmPassword">Şifre(Tekrar):</label></td>
                        <td><input type="password" name="ConfirmPassword" id="ConfirmPassword" /></td>
                    </tr>

                    <tr>
                        <td><input type="submit" value="Üyeliğimi Tamamla" /></td>
                    </tr>


                </tbody>
            </table>
        </div>

Answer 2

根据您正在使用的对话框实现，您的下拉列表很可能隐藏在对话框下方。一些下拉实现也喜欢将下拉列表显示为单独的div（例如kendo ui）。要调试此操作，您可以使用Chrome的检查器将对话框的背景设置为透明。如果您可以在对话框下看到下拉列表，请尝试创建CSS样式以应用于对话框上方的下拉列表。例如：

myitem { z-index：999; }

Answer 3

以下是没有对话框without Dialog

的下拉列表图片

以下是下拉列表with Dialog

的图片

在对话框内打开时，AngularJS下拉列表不起作用

3 个答案: