Bootstrap3 + Angular with Select вызывает падение вниз, чтобы отключить

Question

Я пытаюсь использовать тег HTML Select вместе с AngularJs, используя директиву ng-options, чтобы создать раскрывающееся меню опций. В дополнение к этому я использую Bootstrap 3. У меня также есть ui-bootstrap, импортированный в проект.

Все работает функционально, но у меня есть нечетный вопрос, где, когда пользователь открывает Select выпадающее меню в первый раз после посещения страницы, то последний вариант в раскрывающемся меню обрезается, как на этой картинке:

Как только пользователь выбирает что-то и выбирает выпадающее меню, тогда все отображается правильно.

Вот код, я использую:

<!-- Select --> 
     <div class="form-group"> 
      <label class="col-md-4 control-label" for="selectThemePark">Theme Park</label> 
      <div class="col-md-4"> 
       <select id="selectThemePark" name="selectThemePark" class="form-control" 
         ng-model="tip.theme_park_id" 
         ng-options="themepark.id as themepark.theme_park_name for themepark in all_themeparks | orderBy:'+theme_park_name'"> 
       </select> 
      </div> 
     </div> 

Я не веб-разработчик по профессии, так что я не уверен, что если есть что-то я делаю неправильно с выбора тега HTML или если есть CSS quirk в Bootstrap 3, который мне нужно переписать для тега Select? Любые указания на то, что может вызвать такое поведение?

Answer 1

У меня было время использовать бутстрап с угловыми раскрывающимися меню. Из того, что я видел, часть проблемы связана с тем, что javascript взаимодействует с DOM после отображения страницы. Помните, что угловая/js применяется после визуализации DOM. Причина, по которой он работает после события click, заключается в том, что меню обновляется и восстанавливает DOM для учета введенных элементов (опций). Это была огромная проблема для меня со спусками. Одна вещь, которую я сделал, чтобы исправить это, строит мои меню/навигацию в угловой директиве, используя angular transclude. Это позволяет мне прикрепить меню в момент, когда угловой инициализирован. Возможно, вы захотите, чтобы директива transclude выглядела. Есть несколько блогов и статей, обсуждающих эту тему. Просто найдите bootstrap angular drop down transclude. Существует также вопрос SO о падениях, которые не работают в угловом here. Надеюсь, это поможет вам на правильном пути.