Угловой пользовательский интерфейс всплывающего окна не появляется

Следующий код не отображается всплывающее окно выбора времени. Есть идеи как починить?

Код:

<ul class="dropdown-menu custom-scroll dropDownLabel custom-width" role="menu" aria-labelledby="btn-append-to-body"
                    ng-show="!sr.timedisplay" 
                >
                    <li role="menuitem">
                        <a href="" ng-click="$event.stopPropagation()">Start Time
                           
       <p class="input-group">
        <input type="text" class="form-control" timepicker-popup ng-model="sr.startTime" is-open="opened" timepicker-options="timeOptions" ng-required="true"/>
         <span class="input-group-btn">
          <button class="btn btn-default" ng-click="sr.getTime('startTime')"><i class="glyphicon glyphicon-time"></i></button>
         </span>
        </p>
                        </a>
                    </li></ul>

Источник

3 ответа

Решение

Это раньше работало:

<uib-timepicker></uib-timepicker>

Теперь вам нужно сделать это:

<div uib-timepicker></div>
Источник

Там нет такого понятия, как timepicker-popupПо крайней мере, не в официальной документации - вопрос помечен как /questions/tagged/angular-ui-bootstrap?

Но вы можете создать его самостоятельно, используя timepicker и dropdown:

<span uib-dropdown auto-close="outsideClick">
  <a href uib-dropdown-toggle>
    {{ displayTime }}
  </a>
  <ul class="uib-dropdown-menu">
     <li>
        <uib-timepicker ng-model="mytime" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></uib-timepicker>
     </li>
  </ul>
</span>

сценарий в основном такой же, как из документации Timepicker, кроме displayTime используется для выпадающего списка:

$scope.$watch('mytime', function(newValue, oldValue) {
    var hour = $scope.mytime.getHours()-($scope.mytime.getHours() >= 12 ? 12 : 0),
        hour = hour<10 ? '0'+hour : hour,
        minutes = ($scope.mytime.getMinutes()<10 ? '0' :'') + $scope.mytime.getMinutes(), 
        period = $scope.mytime.getHours() >= 12 ? 'PM' : 'AM';
    $scope.displayTime = hour+':'+minutes+' '+period
  })

plnkr -> http://plnkr.co/edit/J4alKogyKuevSGdTkLFQ?p=preview

NB: PLNKR находится в 0.14.3. Если вы используете Angular UI Bootstrap до 0.14.0, тогда, конечно, пропустите uib- префиксы и все будет работать.

стиль кнопки с глифом:

<span class="btn btn-default" uib-dropdown auto-close="outsideClick" >
  <a href uib-dropdown-toggle>
    {{ displayTime }} <i class="glyphicon glyphicon-time"></i>
  </a>  
  <ul class="uib-dropdown-menu">
     <li>
        <uib-timepicker ng-model="mytime" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></uib-timepicker>
     </li>
  </ul>
</span>

http://plnkr.co/edit/fyC6TfDsrJqsuGCqm11t?p=preview

Источник

На основе примера / ввода Дэвида, вот пример с компонентом ввода в html, но без контроллера. И я проверил его на Firefox и Chrome, он работает хорошо. Кстати, я использую bootstrap v3.3.6 и Angular UI bootstrap v1.3.2.

<div class="row">
    <div class="col-md-2" style="text-align: right">
        <label>Time Picker Popup</label>
    </div>
    <div class="col-md-2">
        <div class="input-group">
            <input type="text" class="form-control">
            <div class="input-group-btn" uib-dropdown auto-close="outsideClick">
                <button type="button" class="btn btn-default dropdown-toggle" uib-dropdown-toggle><i class="glyphicon glyphicon-time"></i></button>
                <ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
                    <li><uib-timepicker ng-model="mytime" hour-step="1" minute-step="15" show-meridian="false"></uib-timepicker>
                </ul>
            </div>
        </div>
    </div>
</div>
Источник
Другие вопросы по тегам