Angularjs: Datum Typ angularjs Eingabe mit ng-Modell zurückgibt undefined

Hallo Leute, ich habe ein Problem mit Datum und ng-Modell zusammen. in meinem index.html habe ich das Eingabefeld wie folgt aus:Angularjs: Datum Typ angularjs Eingabe mit ng-Modell zurückgibt undefined

<input class="form-control" type="date" id="date" ng-model="myData.date" /> 
<button type="submit" class="btn btn-primary" ng-click="myExample()">Submit</button>

und mein Controller:

$scope.myExample = function() { 
    console.debug('date : ', $scope.myData.date); 
}

in meiner Konsole bekomme ich das Protokoll "Datum: undefined"

was scheint das Problem sein, warum ich einen unbestimmten Wert habe?

dank

durch die Art und Weise im mit "Bootstrap-Datepicker"

Quelle

2017-02-02 Arnold wanna be

haben Sie ein Datum ausgewählt und auf Enter geklickt. weil es in meinem Browser gut funktioniert. – Sravan

ja schon ein Datum ausgewählt. aber wenn ich auf den btn klicke immer undefiniert –

verwendest du den contoller als syntax? – Sravan

Sie haben Ihr myData Objekt

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.myData = {}; //Create the object 
 
    $scope.myExample = function() { 
 
    console.log('date : ', $scope.myData.date); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 

 
    <input class="form-control" type="date" id="date" ng-model="myData.date" /> 
 
    <button type="submit" class="btn btn-primary" ng-click="myExample()">Submit</button> 
 

 
</div>

Quelle

2017-02-02 10:07:18 Weedoze

hmm .. was für ein Datepicker verwendest du? –

Ich habe Ihren Code einfach kopiert, ich benutze keine externe Bibliothek. Dies ist der Standarddatepicker – Weedoze

, also denke ich, dass das Problem mit meiner Datumsauswahl ist. weil ich versuche, vorschlagen, aber immer noch undefined Daten –

Eine andere Lösung für die init kann das Datum Wert durch Ihre Funktion ist vorbei .

So habe ich das erreicht.

Code:

<!DOCTYPE html> 
<html ng-app="myApp"> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    </head> 

    <body ng-controller="myController"> 
    <input class="form-control" type="date" id="date" ng-model="myData.date" /> 
<button type="submit" class="btn btn-primary" ng-click="myExample(myData.date)">Submit</button> 
<script> 

    angular.module("myApp",[]) 
    .controller("myController",function($scope){ 
    $scope.myExample = function(date) { 
     console.log(date); 
    alert(date); 
} 

    }) 
</script> 
    </body> 

</html>

Sie können auch Datumsfilter in AngularJS verwenden. Siehe Dokumentation hier https://docs.angularjs.org/api/ng/filter/date

Quelle

2017-02-02 10:33:07

Hier wird die erforderliche Lösung mit Bootstrap-picker

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.myData = {} 
 
    $scope.myData.date = new Date(); 
 
    $scope.myExample = function() { 
 
    console.debug('date : ', $scope.myData.date); 
 
     console.log('date : ', $scope.myData.date); 
 
    } 
 

 
});

<html> 
 
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script> 
 

 

 

 
<body> 
 
<script> 
 
$('#date').datepicker() 
 
</script> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 

 
<input class="form-control" type="date" id="date" ng-model="myData.date" /> 
 
<button type="submit" class="btn btn-primary" ng-click="myExample()">Submit</button> 
 

 
</div> 
 

 
</body> 
 
</html>

Bitte führen Sie das obige Snippet

HERE IS A WORKING DEMO

Quelle

2017-02-02 10:35:32 Sravan

@ Arnold, bitte überprüfen Sie diese Antwort. – Sravan

Angularjs: Datum Typ angularjs Eingabe mit ng-Modell zurückgibt undefined

Antwort

Verwandte Themen