Выпадающее меню AngularJS не работает при открытии внутри диалогового окна

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