2

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 http://stackoverflow.com/a/29194068/2435473 , will give you more idea about how will it work – Pankaj Parkar Aug 25 '15 at 06:18
  • Do you need to bind your controller `ctrl`, isn't it? – Peter Aug 25 '15 at 06:24
  • 1
    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 –  Aug 25 '15 at 06:29

1 Answers1

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

Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
  • 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 http://plnkr.co/edit/T43aPZJsUP8I4saLRnA9?p=preview –  Aug 25 '15 at 06:45
  • @amogh you need to add onchange event on element inside your directive that will set the `ng-model` value – Pankaj Parkar Aug 25 '15 at 08:49