angular (jquery timepicker) is unable to detect changes

Question

Im new to angular and while doing a small exercise, i was struck and I wanted to enable the ng-show depending upon previous row timings and time input is through jquery timepicker, but my angular is unable to read the value of timepicker to show next row

My code is shown below

<table class="table table-bordered">
  <thead>
    <tr>
      <th>Time From</th>
      <th>Time To</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" ng-model="row1" size=6/ disabled>
      </td>
      <td>
        <input type="text" id="timepicker1" ng-model="dup_row1 " size=6/>
      </td>
    </tr>
    <tr ng-show="show_row2()">
      <td>
        <input type="text" ng-model="dup_row1" size=6/>
      </td>
      <td>
        <input type="text" ng-model="dup_row2" size=6/>
      </td>
    </tr>
  </tbody>
</table>

and my script code

var app = angular.module('myApp', []);
app.controller('ctrl', function($scope) {
  $scope.row1 = "00:00"
  $scope.show_row2 = function() {
    if (($scope.dup_row1 && $scope.dup_row1.substring(0, 2) < 24)) {
      return true
    }
  }
$('#timepicker1').timepicki();

Any help would be appreciated. Thanks in advance

my plunker link

take a look at this stackoverflow.com/a/29194068/2435473 , will give you more idea about how will it work — Pankaj Parkar
– Pankaj Parkar, Commented Aug 25, 2015 at 6:18
ya i believe angular is loaded first and on top it timepicker is loaded, hence the value of input is empty......correct me if im wrong — user5186342
– user5186342, Commented Aug 25, 2015 at 6:29

Pankaj Parkar · Accepted Answer · 2015-08-25 06:30:03Z

1

Load jQuery before an AngularJS to avoid compiling DOM again with an jQuery $

You should play with the DOM using directive if you are using any jQuery plugin. You could create you own directive that will do create the timepicki for your element.

Directive

app.directive('timepicki', [

  function() {
    var link;
    link = function(scope, element, attr, ngModel) {
      element.timepicki();
    };

    return {
      restrict: 'A',
      link: link,
      require: 'ngModel'
    };
  }
])

Working Plunkr

answered Aug 25, 2015 at 6:30

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user5186342 Over a year ago

thanks for ur reply...i appreaciate your help....but when i have added a submit button also and found my timepicker is still giving a null value...can you please help me with that...my plunker link plnkr.co/edit/T43aPZJsUP8I4saLRnA9?p=preview

Pankaj Parkar Over a year ago

@amogh you need to add onchange event on element inside your directive that will set the ng-model value

Collectives™ on Stack Overflow

angular (jquery timepicker) is unable to detect changes

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related