angularjs - Jquery Time Picker inside ng-repeat is not working -


as proceeding project. in place need repeat few input fields contains 2 time html5 field. going when testing in chrome when tested in in firefox showing text field. (firefox not support time , date html5 fields). started finding plugin nothing worked requirements.

so have wasted lot of time explaining requirements clearly.

html code. 

<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 , add more</button>     </div>     <div class="col-md-1">       <button ng-show="$last" ng-click="removetimigns($index)">remove</button>     </div>   </div>

now want use jquery ui plugin ok me because using default date picker of jquery ui in place of html5 default time field.

how trying workaround using plugin angular project is. ?

  • i have add jquery each picker need.

    $('#slider_example_1').timepicker({ timeformat: 'hh:mm tt' });

  • i thinking give unique name id="slider_starttine_{{$index}}" , endtime (check html code clarity saying angular)

  • whenever new item added add 2 line jquery using $index.

    but problem strategy not working.

any welcomed. in advance. please comment below if need more clarification. not sure should write here.

that because running jquery code timepicker on element before element contents gets rendered on html

better should wrap jquery plugin code in directive , write bind timepicker element inside directive link function. binding jquery plugin directive considered best practice.

markup

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

directive

app.directive('timepicker', function(){     return {         restrict: 'a',         link: function(scope, element, attrs){             //binding timepicker here ensure             //element available here.             element.timepicker(); //your code here.         }     } });

like way did in this answer


Comments

Post a Comment

Popular posts from this blog

c# - Validate object ID from GET to POST -

i have method allows user access comment have made on site. have post method lets them update comment. my normal solution send entire comment model through, let them update it, update on database when post back. involve sending commentid through in hiddenfor , can manipulated. how can verify commentid sent in get method same i'm getting in post , not able alter comment wish? how can verify commentid sent in method same i'm getting in post? basically have validate following things in post - user logged-in user. authenticated users post comments. commentid in post , should valid commentid , should present in database. userid associated logged-in user should same userid associated comment . comment should contain userid column, can check @ time of update. to make sure update happens comment has been sent in get - hold commentid in session , in post action compare commentid value in session .
Read more

node.js - Custom Model Validator SailsJS -

when using custom model validator checks record within model. return within spread doesn't seem end control flow. //post.js model /** * custom validator **/ types: { isuservalid: function(user_id) { var promise = require('bluebird'); promise.all([ user.findone({id: user_id}) ]) .spread(function(user) { console.log(user); if (user === null || user === undefined) { console.log('failed'); return false; }else{ console.log('passed'); return true; } }); } }, my response standard validation failed response. { "error": "e_validation", "status": 400, "summary": "1 attribute invalid", "model": "post", "invalidattributes": { "owner": [ { "rule": "isuservalid", ...
Read more

php - Find a regex to take part of Email -

i have following emails need extract part from: bestellnummer xxx: 1 von xxx, 1er pack ------------- anfang der nachricht ------------- foo bar baz foo bar baz // <<<<< need text here ------------- ende der nachricht ------------- ------------- anfang der nachricht ------------- foo bar baz foo bar baz ------------- ende der nachricht ------------- there 0 unlimited occurences of ------------- anfang der nachricht ------------- ------------- ende der nachricht ------------- and i'm able extract first part regex: $re = "/------------- .*? -------------.?(.*?).?------------- .*? -------------/s"; but, i'm quite new on learning regex, i'm pretty sure there must better regex extract part (foo bar baz foo bar baz) of text between ------------- anfang der nachricht ------------- ------------- ende der nachricht ------------- as can in different languages, i'm using .? to match between hyphens. i...
Read more