datepickerのドロップダウンメニューがanglejsの内部モーダルを正しく表示しない

Question

AngularJSのモーダル内にjquery datepicker bootstrap-datepickerを使用しています。問題は、ドロップダウンメニューの位置が画面上で間違っていることです。私は、モーダル以外のものはOKなので、モーダルに関連するものだと思います。 私はブートストラップ3.1.1を使用しています。 私はすでにz-index：1151を設定しようとしましたが、これは機能しません。誰か助けてくれますか？

HTML：

<div class="modal fade" tabindex='-1'> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" ng-click="close('N')" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">{{ModalController.label + titulo}}</h4> 
      </div> 
      <div class="modal-body"> 
      <form name="myFormNewColab" method="post"> 
       <div class="form-group" ng-show="tipo=='Colaborador'&&op==1"> 
        <label>Nome do colaborador: *</label> 
        <input type="text" name="newColab" class="form-control" ng-value="nome" ng-model="newColab" required/> 
       </div> 
      </form> 
      <form name="myFormColab" method="post"> 
       <div class="form-group" ng-show="tipo=='Lavoura'&&op==1"> 
        <label>Nome do colaborador: *</label> 
        <select name="novoColaborador" ng-model="novoColaborador" ng-change="changedColab(novoColaborador)" ng-options="x.coNome for x in colabs" class="form-control" required></select> 
        <label>Data Colheita: *</label> 
        <div id="datapicker-container"> 
         <input name="novaDataCol" class="form-control dp2" ng-model="novaDataCol" value="dataCol" required/> 
        </div> 
        <label>Selecione a roça: *</label> 
        <select ng-model="roOption" name="roOption" class="form-control" ng-change="changedRoca(roOption)" ng-options="x.roNome for x in rocas" required></select> 
        <label>Selecione a planta: *</label> 
        <select ng-disabled="myFormColab.roOption.$invalid||plantsRoc.length<=0" ng-model="plOption" name="plOption" class="form-control" ng-change="changedPlanta(plOption)" ng-options="x.plNome for x in plantsRoc" required></select> 
        <label>Variedade da planta: *</label> 
        <input type="text" ng-model="vrOption" ng-value="pl_variedade" name="vrOption" class="form-control" disabled/> 
        <label>Quantidade de caixas: *</label> 
        <input type="number" name="novoQtdPlantas" class="form-control" min="1" ng-model="novoQtdPlantas" required/> 
       </div> 
      </form> 

JS：

  $scope.$watch('dataCol', function() { 
       $('.dp2').datepicker({ 
        format: "dd/mm/yyyy", 
        clearBtn: true, 
        todayBtn: true, 
        todayHighlight: true, 
        autoclose: true 
       }).bind('changeDate', function onDateChange(ev) { 
        $scope.novaDataCol = ev.date; 
       }); 
      }); 

EDIT： link to image of the problem

EDIT2：問題を解決しました！私はこの機能をサポートできなかった古いバージョンのブートストラップを使用していました。私は既にバージョン1.7.1に更新しました。

Answer 1

あなたは

const datePipe= new DatePipe('en-US'); 
this.item.birthDate = datePipe.transform(data['birthDate'], 'yyyy-MM-dd');