CODEWITHSUNDEEP
angularjstimepicker
spidy
spidy

Reputation: 269

angular with timepicker is unable to display value to console log

My HTML 

<body ng-app="app" ng-controller="Ctrl">
      <form name="form">
        <table class="container table table-bordered" id="setpointtable">
          <tr ng-repeat="row in rows" ng-repeat-end-watch>
            <td style="text-align:center;">
              <!-- row timefrom -->
              <input type="text" class="bootstrap-timepicker" placeholder="   {{row.tfPlaceholder}}" style="text-align:center;" ng-model="row.time_from">

            </td>
            <td style="text-align:center;">
              <!-- row timefrom -->
              <input type="text" class="bootstrap-timepicker" placeholder="{{row.ttPlaceholder}}" style="text-align:center;" ng-model="row.time_to">
            </td>
        </table>
      </form>

      <button ng-click="submit()">submit</button>
      <button ng-click="addDynamically()">Add Row</button>

addDynamically() adds data dynamically to table

My controller is 

 <script>
var app = angular.module("app", []);
app.directive('ngRepeatEndWatch', function() {
  return {
    scope: {},
    link: function(scope, element, attrs) {
      console.log(scope, element, attrs);
      if (scope.$parent.$last) {
        $('.bootstrap-timepicker').timepicker();
      }
    }
  };
});
app.controller('Ctrl', function($scope) {

  $scope.rows = [];
  $scope.table = []
  $scope.final1_table = []

  $scope.addDynamically = function() {
    $scope.rows.push({
      tfPlaceholder: "Time From",
      ttPlaceholder: "Time to",
      spfPlaceholder: "Time to",
      sptPlaceholder: "Time to",
      sp_from: "",
      sp_to: "",
      time_from: "",
      time_to: ""
    });

    $scope.submit = function() {
      var i = 0;
      for (var i in $scope.rows) {
        $scope.table.push({

          time_from: $scope.rows[i].time_from,
          time_to: $scope.rows[i].time_to,
          sp_from: $scope.rows[i].sp_from,
          sp_to: $scope.rows[i].sp_to,

        })

      }
      console.log(JSON.stringify($scope.table));

    }
  };
  $scope.deleteRows = function(index) {
    $scope.rows.splice(index, 1);
  };
})

When i click on submit time picki should display to console, but its not There is empty value on console when submit is clicked inside submit function i have written console.log(JSON.stringify($scope.table)) to show data

[plunker link][1] [1]: http://plnkr.co/edit/gfAjRbTrC3e7TXaqSuXC?p=preview

Thnaks in Advance

Upvotes: 2

Views: 224

Answers (2)

Juan Silup&#250; Maza
Juan Silup&#250; Maza

Reputation: 991

Add property on_change of Plugin Timepicki

app.directive('timepicki', function() {
      return {
        require: 'ngModel',
        link: function(scope, el, attr,ngModel) {
          $(el).timepicki({
              on_change: function(dateText) {
                  dateFormat: 'hh:mm a',
                scope.$apply(function() {
                    ngModel.$setViewValue(dateText);
                  });
            }
          });
        }
      };
    })

Upvotes: 0

sharayu
sharayu

Reputation: 26

The timepickers in this example are not exactly bound to any input. When you call timepicker() with the $('.bootstrap-timepicker') selector, it is selecting all the timepickers and calling timepicker() on them.

You can retrieve the time changes if you do something like:

<td style="text-align:center;">
  <!-- row timefrom -->
  <input id="{{ 'timepickerFrom' + $index}}" type="text" class="bootstrap-timepicker" placeholder="{{row.tfPlaceholder}}" style="text-align:center;" ng-model="row.time_from">
</td>
<td style="text-align:center;">
  <!-- row timefrom -->
  <input id="{{ 'timepickerTo' + $index }}" type="text" class="bootstrap-timepicker" placeholder="{{row.ttPlaceholder}}" style="text-align:center;" ng-model="row.time_to">
</td>

And then in your link function, something like:

if (scope.$parent.$last) {
    scope.$parent.row.timepickerFrom = $('#timepickerFrom'+scope.$parent.$index).timepicker();
    scope.$parent.row.timepickerTo = $('#timepickerTo'+scope.$parent.$index).timepicker();
 }

You can access these in you submit function:

    $scope.submit = function() {
      var i = 0;
      for (var i in $scope.rows) {
        $scope.table.push({

          time_from: $scope.rows[i].time_from,
          time_to: $scope.rows[i].time_to,
          sp_from: $scope.rows[i].sp_from,
          sp_to: $scope.rows[i].sp_to,

        })
        console.log($scope.rows[i].timepickerFrom.data());
        console.log($scope.rows[i].timepickerTo.data());

The object returned by data() contains hour, minute, second and meridian fields from which you can construct your time_to and time_from values in the appropriate format.

Hope that helps :)

Upvotes: 0

Related Questions