bootstrap-timepicker 在加载时不显示模型值

Question

我有以下元素：

<div class="input-group bootstrap-timepicker">
    <input type="text"
           class="form-control timepicker"
           name="start-time"
           ng-model="timeSegment[0]"/>
    <span data-toggle="timepicker" class="input-group-addon add-on btn btn-default">
       <i class="icon icon-time"></i>
    </span>
</div>

它包含在多次重复此元素的 ng-repeat 中。上面的代码片段工作完美，加载时正确显示正确的模型值，但使用文本框而不是时间选择器输入时间。我的模型值 'timeSegment[0]' 是格式为 'hh:mm a' 的字符串，例如 '04:00 AM'。

但是，一旦我将 bs-timepicker 属性添加到上述元素（以允许使用时间选择器而不是文本框输入时间）：

<div class="input-group bootstrap-timepicker">
        <input type="text"
               class="form-control timepicker"
               name="start-time"
               ng-model="timeSegment[0]"
               bs-timepicker/>
        <span data-toggle="timepicker" class="input-group-addon add-on btn btn-default">
           <i class="icon icon-time"></i>
        </span>
    </div>

他们显示的是默认时间，而不是我模型中的值。它正确地拾取了我的模型，因为它正确地迭代了正确数量的元素并为它们显示了时间选择器，只是时间选择器中的值不正确。

同样奇怪的是，虽然时间选择器显示默认时间，但只要我更改其中一个，该值就会在我的模型中正确更新。

我想可能是因为时间是我的模型是一个字符串，而不是日期，但是即使添加这里描述的属性http://mgcrea.github.io/angular-strap/#/timepickers，例如下面的，也没有任何区别。我也尝试将我的模型设为 Date 对象，但同样没有区别。

data-modelTimeFormat="hh:mm A"
data-timeType="string"

Answer 1

我最终使用了不同的时间选择器，它按预期工作：

https://angular-ui.github.io/bootstrap/

Answer 2

即使您只是使用时间选择器来选择时间，它的值也需要是一个完整的日期。将 ng-model 的值设为任意日期并将其设置为您需要的时间，例如

var myDateTime = new Date("01-Jan-1970 00:00:00");
ng-model = myDateTime;

bootstrap-timepicker 在加载时不显示模型值

bootstrap-timepicker not displaying model values on load

angular-ui-bootstrap

bootstrap-datetimepicker

angular-strap