Question

当我进入我的项目时。在某些地方我需要重复几个包含两个时间html5字段的输入字段。当我在Chrome中测试时，一切进展顺利但是当我在firefox中测试时，它显示为文本字段。（Firefox不支持时间和日期html5字段）。所以我开始寻找一些插件，但没有任何工作符合我的要求。

所以我已经浪费了很多时间，所以我非常清楚地解释了我的要求。

HTML代码。

<div class="row" ng-repeat="timingindex in timingsArray">
    <div class="col-md-3">
      <select class="form-control" ng-model="timings[$index].group">
        <option value="Pre-Priary">Pre-Priary</option>
        <option  value="Primary">Primary</option>
        <option  value="Middle">Middle</option>
        <option  value="Senior">Senior</option>
      </select> 
    </div>
    <div class="col-md-2">
      <select class="form-control" ng-model="timings[$index].season">
        <option value="summer">Summer</option>
        <option value="winter">winter</option>
      </select> 
    </div>
    <div class="col-md-3">
      Starts: <input type="time" ng-model="timings[$index].starttime"> 
    </div>
    <div class="col-md-3">   

      Finish : <input type="time" ng-model="timings[$index].endtime">

    </div>
    <div class="col-md-1">
      <button ng-click="addNewTimings(timings[$index])">Save and Add More</button>
    </div>
    <div class="col-md-1">
      <button ng-show="$last" ng-click="removeTimigns($index)">Remove</button>
    </div>
  </div>

现在我想使用这个jquery UI Plugin这对我来说没问题，因为我使用的是jquery UI的默认日期选择器来代替我的html5默认时间字段。

我如何尝试使用此插件与我的角度项目解决方法是。？

我必须为我需要的每个选择器添加这个jquery。

$（ '＃slider_example_1'）。timepicker（{ timeFormat：'hh：mm TT' }）;
我正在考虑给出像id =“slider_starttine _ {{$ index}}”这样的唯一名称，并且类似于endtime（检查我的html代码，以便清楚我对于角度的说法）
每当添加新项目时，我将使用$ index添加两行jquery。

但问题是这个策略不起作用。

欢迎任何帮助。提前致谢。如果您需要更多说明，请在下面评论。我不确定我应该在这里写些什么。

Answer 1

这是因为在元素内容在html上呈现之前，你在元素上运行jQuery代码timepicker

最好你应该将jQuery插件代码包装在指令中，并将bind timepicker写入指令链接函数中的该元素。从指令绑定jQuery插件被认为是最佳实践。

<强>标记

<input type="time" timepicker ng-model="timings[$index].starttime">

<强>指令

app.directive('timepicker', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            //binding timepicker from here would be ensure that
            //element would be available only here.
            element.timepicker(); //your code would be here.
        }
    }
});

与this SO answer

中的方式相同

ng-repeat中的Jquery Time Picker无法正常工作

1 个答案: