Jquery ng-repeat 中的时间选择器不工作

Question

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

So I have already wasted lot of time so I am explaining my requirements very clearly.

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 默认时间场.

How i am trying to workaround using this plugin with my angular project is. ?

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

  $('#slider_example_1').timepicker({ 时间格式：'hh:mm TT' });

• 我想给 id="slider_starttine_{{$index}}" 这样的唯一名称，结束时间也类似（检查我的 html 代码以清楚我在说什么 angular )

• 每当添加新项目时，我都会使用 $index.

  添加两行 jquery

  But problem is that this strategy is not working.

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

Answer 1

那是因为在元素内容呈现在 html

上之前，您是 运行 jQuery 代码到元素上的 timepicker

最好将 jQuery 插件代码包装在指令中，并将绑定 timepicker 写入指令 link 函数中的该元素。从指令中绑定 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.
        }
    }
});

就像

中那样