Kann den Wert des Eingabefeldes nicht mit Angular.js

Question

abrufen Ich stehe vor einem Problem. Ich kann die Eingabefeldwerte nicht mit Angular.js finden. Ich erkläre meinen Code unten.

<div class="input-group bmargindiv1 col-md-12"> 
    <span class="input-group-addon ndrftextwidth text-right" style="width:180px">From Time :</span> 
    <input type="text" name="time" id="time" class="form-control oditek-form" placeholder="E.G-9.00AM-10.00AM" ng-model="time" ng-keypress="clearField('time');" maxlength="30"> 
</div> 
<div class="input-group bmargindiv1 col-md-12"> 
    <span class="input-group-addon ndrftextwidth text-right" style="width:180px">To Time :</span> 
    <input type="text" name="time1" id="time1" class="form-control oditek-form" placeholder="E.G-9.00AM-10.00AM" ng-model="time1" ng-keypress="clearField('time1');" maxlength="30"> 
</div> 

Hier bin ich die Integration des jquery-timepicker und das Skript ist unten angegeben.

$(function() { 
    $('#time').timepicker(); 
    $('#time1').timepicker(); 
}); 

Hier mein Problem ist, nach dem Zeitwert auswählt, wenn ich bin Tring derjenigediejenigedasjenige Wert mit einem ng-click Ereignisse seines zeigt undefiniert zu holen.

$scope.addTimeDetails = function() { 
    console.log('times', $scope.time, $scope.time1); 
} 

Bitte helfen Sie mir, dieses Problem zu lösen.

Answer 1

<script> 
$(function() { 
    $('#time').timepicker({change: function(time) { 
     // the input field 
     $scope.time = time; 
     if (!$scope.$$phase) $scope.$apply(); 
    }}); 
    $('#time1').timepicker({change: function(time) { 
     // the input field 
     $scope.time1 = time; 
     if (!$scope.$$phase) $scope.$apply(); 
    }}); 
}); 
<script> 

Sie müssen diesen Code in eckigen js-Controller setzen, um Werte im Modell zu setzen, anstatt HTML einzufügen.

Answer 2

Dies wird nicht funktionieren, da jquery-datepicker das DOM ändert. Sie können versuchen, mit angular-datepicker oder angular UI bootstrap

Answer 3

jquery Zeitpicker möglicherweise nicht das Ereignis keypress feuern.

versuchen Sie es mit ng-change

<input type="text" name="time" id="time" class="form-control oditek-form" placeholder="E.G-9.00AM-10.00AM" ng-model="time" ng-change="clearField('time');" maxlength="30" > 

Answer 4

AngularJS mit jQuery Bibliotheken mixen ist schlechte Lösung. Das Problem ist das nächste: Sie definieren ng-model bei der Eingabe und initialisieren dann jQuery timepicker, wodurch ein Problem entsteht. Sie sollten eine Angularjs-Bibliothek von Drittanbietern für Datepicker verwenden oder eine eigene Direktive erstellen. Dies ist das ähnlich den jQuery Timepicker: angular-jquery-timepicker

Answer 5

Wenn Sie Dritte Bibliothek in Winkeln verwenden, empfohlene Vorgehensweise ist, dass Sie eine Richtlinie wie folgt zu erstellen:

angular.module('app', [ ]) 
    .directive('timePicker', [function() { 
     return { 
     restrict: 'A', 
     require: 'ngModel', 
     scope: { 
      model: '=ngModel' 
     }, 
     link: function ($scope, element, attrs, ngModelCtrl) { 

      element.timepicker(); 

      element.on('changeTime', function() { 
       $scope.$apply(function() { 
        $scope.model = element.val(); 
       }); 
      });  
     } 
    } 
}]); 

und verwenden aus wie:

<input type="text" ng-model="time" time-picker="" /> 
<input type="text" ng-model="time1" time-picker="" /> 

Empfohlene Ressource: thinking-in-angularjs-if-i-have-a-jquery-background

Answer 6

ngModels sollten immer ihre eigenen bezwecken und nicht Umfang propert sein ies:

<input type="text" ng-model="formModel.time"> 

Und in Ihrem Controller:

$scope.formModel = {}; 

Sie werden dann in der Lage sein, den Wert für den Zugriff mit:

$scope.formModel.time;